Mozilla Hacksの「An Introduction to CSS Grid Layout: Part 2」を読みました。前回紹介したPart 1が「グリッドを作る」記事だったのに対し、Part 2は「作ったグリッド上に要素をどう配置するか」を扱う記事です。
CSS Gridは、単に列と行を作るだけでなく、要素をどの行・列に置くかをCSSで明示できるところが強みです。この記事では、grid lineの番号、短縮記法、template areas、名前付きラインという複数の配置方法が順番に紹介されています。
記事の要点
- Grid itemは通常、自動配置で順番に並びますが、より細かく制御したい場合はgrid lineを使って配置できます。
- grid lineは、左から右、上から下へ番号が振られます。右から左の言語では向きが変わることにも触れられています。
grid-row-start、grid-row-end、grid-column-start、grid-column-endを使うと、要素の開始線と終了線を指定できます。grid-row: 2 / 3;やgrid-column: 2 / 3;のような短縮記法も使えます。- ヘッダー、サイドバー、コンテンツ、フッターのような基本レイアウトを、grid line番号で手動配置する例が紹介されています。
grid-template-areasを使うと、レイアウトを文字列の形で視覚的に定義できます。- さらにgrid line自体に名前を付けると、番号ではなく
main-startやcontent-endのような意味のある名前で配置できます。 - Firefox DevToolsでは、line numbers、area names、grid overlayの色変更など、Gridの構造を見えるようにする支援が紹介されています。
リンク先も見てわかったこと
前編のPart 1は、display: grid、grid-template-columns、grid-template-rows、fr、repeat() を扱っていました。Part 2はその上に、配置のための語彙を積み上げています。この2本を合わせると、CSS Gridの最初の学習単位としてかなりまとまっています。
MDNのCSS Grid Layoutは、Grid全体の仕様や実用例を確認するための入口です。Part 2で出てくるline番号、template areas、named linesは、MDN側でさらに深く確認できます。
記事中ではFirefox Developer Editionも案内されています。当時の文脈では、Firefox Quantum / Developer EditionのDevToolsがGridの学習支援としてかなり前面に出ています。CSS Gridはコードだけで理解するより、overlayで線や領域名を見ながら学ぶ方が早い機能だとわかります。
また、記事中のCodePen例は、grid lineでの配置、基本レイアウト、template areas、named linesを段階的に試すための参照として挙げられています。こちらは今回の取得ではCodePen側が403を返したため本文の埋め込み説明までの確認ですが、記事の構成上は実例を触りながら理解するための補助になっています。
気づき
今回の気づきは、CSS Gridの配置指定は「見た目を無理やり動かす」ものではなく、レイアウト上の座標系をCSSに持ち込むものだという点です。grid line番号を使うと、要素を「2行目から3行目、2列目から3列目」のように座標で置けます。template areasを使うと、ヘッダーやフッターといった意味のある領域として置けます。named linesを使うと、線そのものに設計上の名前を付けられます。
つまりCSS Gridは、レイアウトを目視調整の集まりから、構造として読めるものに変えます。小さなサンプルでは番号指定で十分ですが、実際の画面が大きくなるほど、template areasやnamed linesのような「意味を残す書き方」が効いてきます。これはコンポーネントやデザインシステムを扱う時にも大事な視点だと思いました。
読むとよさそうな人
- CSS Gridで要素を任意の位置に置く基本を学びたい人
grid-row、grid-column、grid-template-areasの違いを整理したい人- Firefox DevToolsのGrid Inspectorを、学習やデバッグにどう使うか知りたい人
コメントを残す