デモ付！コピペ可！未経験大歓迎！FlexとGridによるTailwindCSSの基本レイアウトサンプル

## 環境

+ **TailwindCSS** 3
+ Chrome



## はじめに

#### 基本的に

- 具体的なサイズ（`100%,100px,100rem`など）を指定しなくて、自動幅調整を指定
- **Flex**と**Grid**を中心



#### ベースHTML

必要なタブ、とてもきれいなスタイルを追加
```html
<!--index.html--> 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/main.css" />
    <title>Tailwindcss Layout</title>
  </head>

  <!--body--> 
　<body class="font-bold text-gray-700">
    <div class="bg-cyan-100 pl-2">header</div>
    <div class="bg-yellow-100 pl-2">content</div>
    <div class="bg-purple-100 pl-2">footer</div>
  </body>
</html>
```



#### ベースCSS

`html,body`要素の高さを指定

```scss
/*main.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html,body {
        /*ニーズによって指定、ここはフル画面*/
        @apply min-h-screen;
    }
}
```

**CodePen**を使う場合

```css
/* <script src="https://cdn.tailwindcss.com"></script> */
html,
body {
	min-height: 100vh;
}
```



## 1カラム

#### Flex

```html
  <body class="font-bold text-gray-700 flex flex-col">
    <div class="bg-cyan-100 pl-2">header</div>
    <div class="bg-yellow-100 pl-2 flex-grow">content</div>
    <div class="bg-purple-100 pl-2">footer</div>
  </body>
```
🌐 CodePen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNvbego" data-user="kensoz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kensoz/pen/rNvbego">
  1カラム-Flex</a> by kensoz (<a href="https://codepen.io/kensoz">@kensoz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



#### Grid

```html
  <body class="font-bold text-gray-700 grid grid-rows-[auto_1fr_auto]">
    <div class="bg-cyan-100 pl-2">header</div>
    <div class="bg-yellow-100 pl-2">content</div>
    <div class="bg-purple-100 pl-2">footer</div>
  </body>
```
🌐 CodePen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNvgKOm" data-user="kensoz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kensoz/pen/rNvgKOm">
  1カラム-Grid</a> by kensoz (<a href="https://codepen.io/kensoz">@kensoz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



## 2カラム

#### Flex

```html
  <body class="font-bold text-gray-700 flex flex-col">
    <div class="bg-cyan-100 pl-2">header</div>
    <div class="flex-grow flex">
      <div class="bg-rose-100 px-2">navi</div>
      <div class="bg-yellow-100 pl-2 flex-grow">content</div>
    </div>
    <div class="bg-purple-100 pl-2">footer</div>
  </body>
```
🌐 CodePen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGMyKPg" data-user="kensoz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kensoz/pen/bGMyKPg">
  2カラム-Flex</a> by kensoz (<a href="https://codepen.io/kensoz">@kensoz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



#### Grid

```html
  <body class="font-bold text-gray-700 grid grid-rows-[auto_1fr_auto] grid-cols-[auto_1fr]">
    <div class="bg-cyan-100 pl-2 col-span-full">header</div>
    <div class="bg-rose-100 px-2">navi</div>
    <div class="bg-yellow-100 pl-2">content</div>
    <div class="bg-purple-100 pl-2 col-span-full">footer</div>
  </body>
```
🌐 CodePen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGMyKEG" data-user="kensoz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kensoz/pen/bGMyKEG">
  2カラム-Grid</a> by kensoz (<a href="https://codepen.io/kensoz">@kensoz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 2カラム（ナビ強調）

#### Flex

```html
  <body class="font-bold text-gray-700 flex flex-col">
    <div class="bg-cyan-100 pl-2">header</div>
    <div class="flex-grow flex">
      <div class="bg-rose-100 px-2">navi</div>
      <div class="flex flex-col flex-grow">
        <div class="bg-yellow-100 pl-2 flex-grow">content</div>
        <div class="bg-purple-100 pl-2">footer</div>
      </div>
    </div>
  </body>
```
🌐 CodePen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wvjLJgX" data-user="kensoz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kensoz/pen/wvjLJgX">
  2カラム（変種）-Flex</a> by kensoz (<a href="https://codepen.io/kensoz">@kensoz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


#### Grid


```html
  <body class="font-bold text-gray-700 grid grid-rows-[auto_1fr_auto] grid-cols-[auto_1fr]">
    <div class="bg-cyan-100 pl-2 col-span-full">header</div>
    <div class="bg-rose-100 px-2 row-span-2">navi</div>
    <div class="bg-yellow-100 pl-2">content</div>
    <div class="bg-purple-100 pl-2">footer</div>
  </body>
```
🌐 CodePen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwxJpzW" data-user="kensoz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kensoz/pen/VwxJpzW">
  2カラム（変種）-Grid</a> by kensoz (<a href="https://codepen.io/kensoz">@kensoz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



## 2カラム（フルナビ）

#### Flex


```html
  <body class="font-bold text-gray-700 flex">
    <div class="bg-rose-100 px-2">navi</div>
    <div class="flex-grow flex flex-col">
      <div class="bg-cyan-100 pl-2">header</div>
      <div class="bg-yellow-100 pl-2 flex-grow">content</div>
      <div class="bg-purple-100 pl-2">footer</div>
    </div>
  </body>
```
🌐 CodePen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNvEyyN" data-user="kensoz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kensoz/pen/rNvEyyN">
  2カラム（フルナビ）-Flex</a> by kensoz (<a href="https://codepen.io/kensoz">@kensoz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### Grid


```html
  <body class="font-bold text-gray-700 grid grid-rows-[auto_1fr_auto] grid-cols-[auto_1fr]">
    <div class="bg-rose-100 px-2 row-span-3">navi</div>
    <div class="bg-cyan-100 pl-2">header</div>
    <div class="bg-yellow-100 pl-2">content</div>
    <div class="bg-purple-100 pl-2">footer</div>
  </body>
```
🌐 CodePen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yLjdMXW" data-user="kensoz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kensoz/pen/yLjdMXW">
  2カラム（フルナビ）-Grid</a> by kensoz (<a href="https://codepen.io/kensoz">@kensoz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 3カラム/聖杯レイアウト

#### Flex

```html
  <body class="font-bold text-gray-700 flex flex-col">
    <div class="bg-cyan-100 pl-2">header</div>
    <div class="flex-grow flex">
      <div class="bg-rose-100 px-2">navi</div>
      <div class="bg-yellow-100 pl-2 flex-grow">content</div>
      <div class="bg-rose-100 px-2">navi</div>
    </div>
    <div class="bg-purple-100 pl-2">footer</div>
  </body>
```
🌐 CodePen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GRdaBjq" data-user="kensoz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kensoz/pen/GRdaBjq">
  3カラム/聖杯レイアウト-Flex</a> by kensoz (<a href="https://codepen.io/kensoz">@kensoz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


#### Grid


```html
  <body class="font-bold text-gray-700 grid grid-rows-[auto_1fr_auto] grid-cols-[auto_1fr_auto]">
    <div class="bg-cyan-100 pl-2 col-span-full">header</div>
    <div class="bg-rose-100 px-2">navi</div>
    <div class="bg-yellow-100 pl-2">content</div>
    <div class="bg-rose-100 px-2">navi</div>
    <div class="bg-purple-100 pl-2 col-span-full">footer</div>
  </body>
```
🌐 CodePen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yLjWqaj" data-user="kensoz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kensoz/pen/yLjWqaj">
  3カラム/聖杯レイアウト-Grid</a> by kensoz (<a href="https://codepen.io/kensoz">@kensoz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## カード

#### Flex

カードサイズ`.basis-1/4 .m-2`を指定（`flex-basis:25%；magrin:0.5rem`）


```html
  <body class="font-bold text-gray-700 flex flex-wrap">
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
  </body>
```
🌐 CodePen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="xxjodqp" data-user="kensoz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kensoz/pen/xxjodqp">
  カード-Flex</a> by kensoz (<a href="https://codepen.io/kensoz">@kensoz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


#### Grid

```html
  <body class="font-bold text-gray-700 grid grid-cols-4 gap-4 p-2">
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
  </body>
```
🌐 CodePen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWGMmmb" data-user="kensoz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kensoz/pen/MWGMmmb">
  カード-Grid</a> by kensoz (<a href="https://codepen.io/kensoz">@kensoz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## タイルレイアウト

#### Columns


```html
  <div class="columns-4">
    <img class="mb-4" src="https://source.unsplash.com/random/1" />
    <img class="mb-4" src="https://source.unsplash.com/random/2" />
    <img class="mb-4" src="https://source.unsplash.com/random/3" />
    <img class="mb-4" src="https://source.unsplash.com/random/4" />
    <img class="mb-4" src="https://source.unsplash.com/random/5" />
    <img class="mb-4" src="https://source.unsplash.com/random/6" />
    <img class="mb-4" src="https://source.unsplash.com/random/7" />
    <img class="mb-4" src="https://source.unsplash.com/random/8" />
    <img class="mb-4" src="https://source.unsplash.com/random/9" />
  </div>
```
🌐 CodePen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWGMmVp" data-user="kensoz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kensoz/pen/MWGMmVp">
  タイルレイアウト-Columns</a> by kensoz (<a href="https://codepen.io/kensoz">@kensoz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>