CSS Gridレイアウトの使い方

# [用途の違い](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods)
* flexboxは1次元
* gridは2次元

行または列のみであればflex、行と列両方を制御する必要があるならgrid推奨。

Flexbox
![スクリーンショット 2024-09-29 18.44.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493261/ac6954b7-6b15-6acc-f3f5-61b69dcaa1e4.png)

Grid
![スクリーンショット 2024-09-29 18.45.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493261/34dfbadc-d7e8-76fd-1211-70cb7f361e38.png)


# Grid レイアウト
### grid-template-columns / grid-template-rowsを使って幅や高さを指定
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="xxvGBVE" data-pen-title="Grid Layout Basic" data-user="hiroshikm" 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/hiroshikm/pen/xxvGBVE">
  Grid Layout Basic</a> by Hiroshi (<a href="https://codepen.io/hiroshikm">@hiroshikm</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### frを使って幅や高さを指定
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWvbGdm" data-pen-title="Grid Layout fr" data-user="hiroshikm" 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/hiroshikm/pen/XWvbGdm">
  Grid Layout fr</a> by Hiroshi (<a href="https://codepen.io/hiroshikm">@hiroshikm</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### repeatを使って幅や高さを指定
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eYqNXZm" data-pen-title="Grid Layout repeat" data-user="hiroshikm" 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/hiroshikm/pen/eYqNXZm">
  Grid Layout repeat</a> by Hiroshi (<a href="https://codepen.io/hiroshikm">@hiroshikm</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### grid-column  / grid-rowでグリッドを何枠使うかを指定
`grid-column: 1 / 5;`なら列グリッド1本目から5本目まで使用。
`grid-column: 1 / span 4;`なら「始まりのライン1 / span 4個分のボックス」を使用。
つまり、`grid-column: 1 / 5;`と`grid-column: 1 / span 4;`は同じです。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzmXBzX" data-pen-title="Grid Layout grid-column grid-row" data-user="hiroshikm" 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/hiroshikm/pen/YzmXBzX">
  Grid Layout grid-column grid-row</a> by Hiroshi (<a href="https://codepen.io/hiroshikm">@hiroshikm</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-areas / grid-areaでエリア名を指定してレイアウト作成

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="abevdqK" data-pen-title="Grid Layout grid-template-areas・grid-area" data-user="hiroshikm" 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/hiroshikm/pen/abevdqK">
  Grid Layout grid-template-areas・grid-area</a> by Hiroshi (<a href="https://codepen.io/hiroshikm">@hiroshikm</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### subgridで入れ子構造を作る
子要素にも`display:grid`を定義して、その中にアイテムを配置することはもちろん可能だが、その場合あくまで親は親、子は子でグリッドが独立して存在することになり、親子のグリッドはピタッと位置しない。
そのため親のグリッドに合わせて子のグリッドを配置したい時に困る。
そこで使用するのがsubgrid。親のgridを子に引き継ぎます。
以下例では、subgridを使用することで、cardごとのタイトルや画像やボタンなど、横のラインが一致している。

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