Mozilla Hacksの「An Introduction to CSS Grid Layout: Part 1」を読みました。CSS Grid Layoutを初めて触る人向けに、用語、グリッド作成、行列定義、gap、fr、repeat() を順に説明する入門記事です。
先に紹介したSubgridの記事はCSS Grid Level 2の話でしたが、今回の記事はその土台になるCSS Grid Layoutそのものの入口です。Subgridを理解する前に、grid line、grid cell、grid area、grid trackといった基本語彙を押さえる記事として読めます。
記事の要点
- CSS Grid Layoutは、CSS標準として提供される二次元グリッドシステムです。
- float、table、CSSフレームワーク、各種ハックに頼らず、行と列をCSSで明示できます。
- 記事では、grid line、grid cell、grid area、grid track、grid row、grid column、gutter、grid container、grid itemといった用語を整理しています。
- グリッドは、対象要素に
display: gridを指定して作ります。 grid-template-columnsとgrid-template-rowsで、明示的な列と行のサイズを定義します。- 行と列の間隔は、当時の記事では
grid-gapとして説明されています。 frは利用可能な空間の割合を表す単位で、固定幅だけではない柔軟なグリッドを作れます。repeat()記法を使うと、1fr 1fr 1frのような繰り返しを短く書けます。
リンク先も見てわかったこと
記事内で案内されているMDNのCSS Grid Layoutは、Grid全体を体系的に確認する入口です。さらにimplicit gridとexplicit gridの説明を見ると、記事で少し触れられている「定義した外に配置された要素は暗黙的なグリッドを作る」という点が補えます。
writing-modeのMDNページも参照しました。記事中では、縦書きなどでは行と列の向きの感じ方が変わることに触れられています。Gridは単なる横書き前提のレイアウト機能ではなく、書字方向と組み合わせて考える必要があります。
続きのPart 2では、grid lineの番号を使って要素を配置する方法、grid-row と grid-column の短縮記法、名前付きラインを使う方法が扱われています。Part 1が「グリッドを作る」記事なら、Part 2は「グリッド上に意図して置く」記事です。
気づき
今回の気づきは、CSS Gridの重要さは「複雑なレイアウトが作れる」ことだけではなく、「レイアウトの意図をCSSの言葉で直接書ける」ことにあるという点です。以前は、列を作るためにfloatを使ったり、表ではないものをtable的に扱ったり、フレームワークのグリッドクラスに依存したりする場面が多くありました。
CSS Gridでは、列数、行数、隙間、余白の配分、固定幅と可変幅の混在を、レイアウトのためのプロパティとしてそのまま書けます。これは単にコード量を減らすだけでなく、「この画面はどういう二次元構造なのか」をCSS上で読み取れるようにする変化です。
SubgridやInteropの記事を読んだ後にこの入門記事へ戻ると、CSS GridがWeb標準として定着した意味が見えやすくなります。まず基本のGridが標準機能として使えるようになり、その後にSubgridのような「ネストした部品とページ全体の整列をつなぐ機能」が必要になった、という流れです。
読むとよさそうな人
- CSS Gridの用語を最初から整理したい人
display: grid、grid-template-columns、fr、repeat()の役割を押さえたい人- SubgridやCSS Grid Level 2の前に、CSS Grid Layoutの土台を確認したい人
コメントを残す