CSS Gridの応用(grid-template-areas)

このレッスンでは、CSS Gridのgrid-template-areasを使った直感的なレイアウトの組み方を学ぶことを目標にします。「CSS grid-template-areas 使い方」で調べている方向けの内容です。

grid-template-areasを使うと、レイアウトを「名前の付いたマス目」で直感的に指定できます。「ヘッダー・サイドバー・メイン・フッター」のような配置図をそのままコードに書けるイメージです。

サンプルコードでは、grid-template-areasの中に文字列で配置図を描き、各要素にgrid-area: header;のような名前を対応させています。文字列の見た目がそのままレイアウトの完成イメージになっているため、コードを見るだけで全体の構造がひと目で分かります。

初心者がよくつまずくのが、grid-template-areasの文字列とgrid-areaで指定する名前のスペルを一致させる必要がある点です。1文字でも違うと、その要素は意図した位置に配置されません。同じ名前を繰り返し使うと、セルを結合することもできます。

複雑なgrid-columnの数字を計算しなくても、レイアウトの見取り図をそのまま書き写すような感覚でページ全体の骨組みを組み立てられるのが魅力です。全体構成を持つWebサイトのテンプレート作成に向いています。