Grid Layout モジュールを全部試す

# Hello Gridレイアウト
こんにちは！Gridが気になってここへ来られたんですね。わかります。

なんか難しそう！flexでいいじゃん！
ぜんぜんわからない。俺たちは雰囲気でGridレイアウトをやっているetc

...よし！せっかくですし、一緒に試していきましょう:relaxed:
大丈夫です、たったの数時間で終わります！

# さて、全部試していきましょう！

下記で記載されているものを全て試していきます。

グリッドレイアウト （Grid Layout モジュール）
https://www.htmq.com/css/#grid

```
グリッドの定義
grid-template-rows   …… グリッドトラックの縦方向のサイズリストを指定する
grid-template-columns…… グリッドトラックの横方向のサイズリストを指定する
grid-template-areas  …… 名前付きグリッド領域を指定する
grid-template        …… グリッドトラックのリストについてまとめて指定する
grid-auto-rows       …… サイズリストでは不明確なグリッドトラックの縦方向のサイズを指定する
grid-auto-columns    …… サイズリストでは不明確なグリッドトラックの横方向のサイズを指定する
grid-auto-flow       …… グリッドアイテムの自動配置のされ方を指定する
grid                 …… グリッドについてまとめて指定する

グリッドアイテムの配置
grid-row-start       …… 行グリッドの開始位置やサイズ（グリッドスパン）を指定する
grid-column-start    …… 列グリッドの開始位置やサイズ（グリッドスパン）を指定する
grid-row-end         …… 行グリッドの終了位置やサイズ（グリッドスパン）を指定する
grid-column-end      …… 列グリッドの終了位置やサイズ（グリッドスパン）を指定する
grid-row             …… 行グリッドの開始と終了についてまとめて指定する
grid-column          …… 列グリッドの開始と終了についてまとめて指定する
grid-area            …… 行グリッド・列グリッドの開始と終了についてまとめて指定する
```


...大丈夫!!!
たったの数時間で終わります！
それを乗り越えればGridのスキルGETです！

# グリッドの配置

まずはグリッドの配置から見ていきます。
CodePenの中にコメントも書いてますので、是非そちらも参考ください。

## grid-template-rows
グリッドトラックの縦方向のサイズリストを指定する。
`grid-template-rows: 80px 100px 40px;` としたので、上から3`行`はその通りの高さになりました。
4行目からは指定していないので、自動的に決まるようです。(grid-auto-rowsで指定可能)

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="jOeJvXe" data-user="TTTMMMM" 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/TTTMMMM/pen/jOeJvXe">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## grid-template-columns
グリッドトラックの横方向のサイズリストを指定する
`grid-template-columns: 50px 100px 40px;` としたので、左から3`列`はその通りの幅になりました。
4列目からは指定していないので、勝手に折り返しました。(grid-auto-columnsで指定可能)

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdzoGoM" data-user="TTTMMMM" 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/TTTMMMM/pen/mdzoGoM">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`grid-template-columns: 50px 100px 40px 100px;`　とおいてみると、横並びになりました！
![スクリーンショット 2023-05-26 9.34.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129861/f38158a2-f947-83f6-a995-6d9c6462aea0.png)

## grid-template-areas
名前付きグリッド領域を指定する
cssに、視覚的に要素の配置を書くようですね！直感的に見た目が想像できそうです。
でもこれ、要素を増減させたい場合、全体のレイアウトに影響してしまいます。
検証も増えるので私はやりたくないです。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWZoZLJ" data-user="TTTMMMM" 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/TTTMMMM/pen/QWZoZLJ">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## grid-template
グリッドトラックのリストについてまとめて指定する
grid-template-rows、grid-template-columns、grid-template-areasをまとめて指定できます。

#### grid-template-rows、grid-template-columns をまとめる

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yLRWVMZ" data-user="TTTMMMM" 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/TTTMMMM/pen/yLRWVMZ">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### grid-template-rows、grid-template-columns、grid-template-areas をまとめる

:tired_face:
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GRYeYgy" data-user="TTTMMMM" 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/TTTMMMM/pen/GRYeYgy">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM< a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## grid-auto-rows
サイズリストでは不明確なグリッドトラックの`縦方向`のサイズを指定する。
下では、grid-template-rowsを指定していませんので、自動的(auto)に30pxが適用されました。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dygLVaJ" data-user="TTTMMMM" 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/TTTMMMM/pen/dygLVaJ">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## grid-auto-columns
サイズリストでは不明確なグリッドトラックの`横方向`のサイズを指定する。
下では、grid-template-columnsを指定していませんので、自動的(auto)に100pxが適用されました。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwENMNQ" data-user="TTTMMMM" 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/TTTMMMM/pen/VwENMNQ">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## grid-auto-flow
グリッドアイテムの自動配置のされ方を指定する。
tempalteで指定していない、溢れた要素に対しての自動設定となります。
`row`,`column`,`dense`を指定することができます。初期値は`row`となります。

---

#### row , column
:construction_worker:「`row`なら、前の要素の右に並び、`自動で行を増やして`くれ。列は増やすなよ！`column;`なら、前の要素の下に並び、`自動で列を増やして`くれ。行は増やすなよ！」

:man_tone1:「OK」

:construction_worker:「`row`も`column`も、templateの指定通りの幅と行を守れよ！！ちなみに溢れたやつは `grid-auto-rows`、 `grid-auto-columns` の通りに並んでくれ！」

:man_tone1:「`grid-auto-xxxx`の指定がないぞ！」

:construction_worker:「じゃぁ`grid-auto-rows: auto;`、 `grid-auto-columns: auto;`で並んでおいてくれ！」

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYVMeor" data-user="TTTMMMM" 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/TTTMMMM/pen/vYVMeor">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### dense
場所指定されていない要素は、隙間に詰めて入っていきます。(病院に予約せず行った人の順番待ちのイメージ?)
ただ、グリッドアイテムのサイズの大小をもとに順番が決められるので、意図したところに入らないことがあります:frowning2:

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEqNBGw" data-user="TTTMMMM" 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/TTTMMMM/pen/ZEqNBGw">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## grid
グリッドについてまとめて指定する。
明示的と、暗黙的を混ぜて指定することはできない。
そのため、`.content4`、`.content5`のように、明示的と別で暗黙的な指定を行う。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdzgQzZ" data-user="TTTMMMM" 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/TTTMMMM/pen/mdzgQzZ">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### グリッドの配置の感想

grid-auto-flowの理解がややこしいですね。
行を増やすか、列を増やすかを理解しよう！

# グリッドアイテムの配置

まずはこちらの、凄くわかりやすい図をご覧ください。
![スクリーンショット 2023-05-29 23.21.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129861/9ceef392-3547-60a1-e5c9-2dce52b38bb6.png)

グリッドアイテムは、この赤線、青線のルールで配置されます。
- 青線1から青線2まで (column)
- 赤線1から赤線4まで (row)

といったような指定をします。

## grid-row-start、grid-row-end
#### grid-row-start
行グリッドの開始位置やspanを指定
#### grid-row-end
行グリッドの終了位置やspanを指定

- auto::初期値
- span::占有する行


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWxwKye" data-user="TTTMMMM" 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/TTTMMMM/pen/XWxwKye">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


- カスタムID::グリッド位置に任意の名前をつけて、それをもとに占有を指定する

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KKGLgqX" data-user="TTTMMMM" 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/TTTMMMM/pen/KKGLgqX">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

上記のカスタムIDはこんな名前をつけています

```js
                    column1-end         column2-end
column1-start       column2-start       column3-start 
v                   v                   v
+-------------------+-------------------+ <- row1-start
|       幅20px      |      幅100px       | 高さ50px
+-------------------+-------------------+ <- row1-end, row2-start
|                   |                   | 高さ100px
+-------------------+-------------------+ <- row2-end, row3-start
// ChatGPT作のAA
```

## grid-column-start、grid-column-end
#### grid-column-start
列グリッドの開始位置やspanを指定
#### grid-column-end
列グリッドの終了位置やspanを指定

- auto::初期値
- span::占有する行
- カスタムID

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BaqeLmQ" data-user="TTTMMMM" 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/TTTMMMM/pen/BaqeLmQ">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## grid-row , grid-column
#### grid-row
行グリッドの開始と終了についてまとめて指定する
#### grid-column
列グリッドの開始と終了についてまとめて指定する

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dygEpjy" data-user="TTTMMMM" 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/TTTMMMM/pen/dygEpjy">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## grid-area
行グリッド・列グリッドの開始と終了についてまとめて指定する

- auto 初期値
- grid-area-startの値 / grid-area-endの値
  - 半角スラッシュ区切り（ / ）で、grid-row-startの値 / grid-column-startの値 / grid-row-endの値 / grid-column-endの値 を指定 (え？:fearful:)

```scss
grid-area: 1 / 1 / 3 / 3; 
/* 
つまり↓です。
grid-area: rowStart / columnStart / rowEnd / columnEnd;
*/
```

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="xxyNEmo" data-user="TTTMMMM" 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/TTTMMMM/pen/xxyNEmo">
  Untitled</a> by TM (<a href="https://codepen.io/TTTMMMM">@TTTMMMM</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## まとめ

お疲れ様でした。
[グリッドレイアウト （Grid Layout モジュール）](https://www.htmq.com/css/#grid)を制覇しましたね！！
これであなたもGridマスターに近づきました！

次回は、Gridで使えるさまざまなプロパティについても試しながら見ていきましょう！

- justify-items
    - 水平方向にアイテムをどのように配置するかを指定します。スタート、エンド、センター、ストレッチなどの値を取ることができます。
- align-items
    - 垂直方向にアイテムをどのように配置するかを指定します。スタート、エンド、センター、ストレッチなどの値を取ることができます。
- place-items
    - justify-itemsとalign-itemsを一度に指定します。
- justify-content
    - 水平方向にグリッド全体をどのように配置するかを指定します。スタート、エンド、センター、スペースアラウンド、スペースビトウィーンなどの値を取ることができます。
- align-content
    - 垂直方向にグリッド全体をどのように配置するかを指定します。スタート、エンド、センター、スペースアラウンド、スペースビトウィーンなどの値を取ることができます。
- place-content
    - justify-contentとalign-contentを一度に指定します。
- justify-self
    - 水平方向に単一のアイテムをどのように配置するかを指定します。スタート、エンド、センター、ストレッチなどの値を取ることができます。
- align-self
    - 垂直方向に単一のアイテムをどのように配置するかを指定します。スタート、エンド、センター、ストレッチなどの値を取ることができます。
- place-self
    - justify-selfとalign-selfを一度に指定します。
- gap、row-gap、column-gap
    - グリッドの行や列の間にギャップ（空白）を作ることができます。gapはrow-gapとcolumn-gapを一度に指定します。

(ひぇっ。。。)
大丈夫!!!たったの数時間です！楽勝です!!!!
それを乗り越えればGridのさらなるスキルGETです！

---

参考
https://qiita.com/kura07/items/e633b35e33e43240d363
https://www.htmq.com/css/#grid