何番煎じか分からないけど、CSSのGrid Layoutについて調べてみたのでまとめてみる。
Part 1: Grid Layoutの概要
Part 2: 使い方（Grid Layoutの用語と基本）（イマココ）
Part 3: 使い方（グリッドコンテナ、アイテムの作り方）
Part 4: 実際にGrid Layoutを使ってみる
Part 5: レスポンシブデザイン対応してみる
用語
Grid Layoutでよく出てくる用語をまとめる。
グリッドコンテナ
分割の対象となる要素。FlexboxのFlexコンテナと同様。
CSSでdisplay: grid;を指定した要素がグリッドコンテナとなる。
グリッドアイテム
グリッドコンテナに配置される各要素。FlexboxのFlexアイテムと同様。
グリッドコンテナ直下の要素は基本的に全てグリッドアイテム（レイアウト対象）となる。
グリッドの構成要素
ライン
グリッドを構成する縦横の線（下図参照）
最外にも存在し、上→下、左→右の順に、1〜nまで番号が振られる。
セル
ラインによって分割された各ブロック（下図参照）
エリア
複数のセルによって構成される長方形（下図参照）
Grid Layoutの作り方の基本
構成
Grid Layoutは基本的に1つのグリッドコンテナと複数のグリッドアイテムによって構成される。
グリッドコンテナで分割方法とエリアを設定し、各グリッドアイテムでどのエリアに配置されるかを指定することで全体のレイアウトを構築する。
グリッドコンテナで定義したグリッドの各ライン、及びエリアには任意に名前を割り当てることが出来る。
※ 具体的な定義方法は次回に詳しく説明する。
配置方法
グリッドアイテムを配置する方法は以下の3つ。
- 空きセルに自動的に配置
- エリア名を指定して配置
- 行、列のラインの
start,end or spanを指定して配置
例として、グリッドコンテナで以下のようなグリッドを定義したとする（行：ライン1〜5、列：ライン1〜4、エリア：a, b）
ここで任意のグリッドアイテムをエリアa, bに配置する場合、エリア名a, bを直接指定して配置するか、
- エリアa：
行：2〜3、列：1〜2 - エリアb：
行：3〜5、列：2〜4or行：3から2つ分、列：2から2つ分
のように、行、列のラインのstart, endを指定して配置することが出来る。
この際、配置方法を指定されない（もしくは明示的に自動配置を指定された）グリッドアイテムは自動的に左上→右下に向かって空きセルに配置される。自動配置の方法（行→列 or 列→行）はグリッドコンテナにて指定することが出来る。