前回（【CSS Grid 基本編】grid-template-columns/rows、gapについて - Qiita）は CSS grid の基本的な使い方をまとめたので今回は応用編。

位置と大きさを指定する`grid-template-areas`と`grid-area`

例えば、簡単にWEBサイトでよく見るようなレイアウトがgridで簡単に組める。

親と子に指定する必要があり、

子にgrid-areasで名前を指定してあげる。
親のgrid-template-areasで子に指定したgrid-areasの名前で位置と大きさを決める。

子に`grid-areas`で名前を指定してあげる。

HTML

<div class="wrapper">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="main">main</div>
  <div class="footer">footer</div>
</div>

子

.header{
  grid-area: header;
}
.sidebar{
  grid-area: sidebar;
}
.main{
  grid-area: main;
}
.footer{
  grid-area: footer;
}

親に`grid-template-areas`を指定

grid-template-columnsと-rowsで列と行を決め、
grid-template-areas を指定。

（今回は横3×縦4の均等なグリッドで説明）

grid-template-areas

  grid-template-areas:
    "header header header"
    "sidebar main main"
    "sidebar main main"    
    "footer footer footer";

grid-template-areasは""内を1行として、スペースを開けて列の指定する。
絵と同じ見た目でかけるからかなり感覚的に指定できる。

CODEPEN

See the Pen Untitled by himeka223 (@himeka223) on CodePen.

`auto-fit`と`auto-fill`、`minimax`の組み合わせで簡単にレスポンシブ、折返しができる！

auto-fit

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

auto-fill

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

上はどちらも 100px~1fr に伸縮する指定。
縮めなくなったら(100px以下)、段落ち。
repeat()で繰り返す回数ではなくauto-fitとauto-fillを指定することで自動で判断してくれる。

auto-fitは子の数分のグリッドができるので横幅いっぱいに見える
auto-fillは子の幅を基準にグリッドができ、余るグリッドができる

CODEPEN

See the Pen Grid/auto-fit,-fill by himeka223 (@himeka223) on CodePen.

まとめ

他にもgridの指定は色々ありそうだけど、この辺を押さえておけば使いこなせそう

参考サイト

これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る – WPJ
2021年版、CSS Gridでどのように配置されるかをまとめたチートシート
 gridレイアウトについて調べました【CSS/grid-template/auto-fit/auto-fill】 | えむ家のメモ帳