用語

Grid Layoutでよく出てくる用語をまとめる。

グリッドコンテナ

分割の対象となる要素。FlexboxのFlexコンテナと同様。
CSSでdisplay: grid;を指定した要素がグリッドコンテナとなる。

グリッドコンテナに配置される各要素。FlexboxのFlexアイテムと同様。
グリッドコンテナ直下の要素は基本的に全てグリッドアイテム（レイアウト対象）となる。

グリッドを構成する縦横の線（下図参照）
最外にも存在し、上→下、左→右の順に、1〜nまで番号が振られる。

ラインによって分割された各ブロック（下図参照）

複数のセルによって構成される長方形（下図参照）

Grid Layoutは基本的に1つのグリッドコンテナと複数のグリッドアイテムによって構成される。

グリッドコンテナで分割方法とエリアを設定し、各グリッドアイテムでどのエリアに配置されるかを指定することで全体のレイアウトを構築する。
グリッドコンテナで定義したグリッドの各ライン、及びエリアには任意に名前を割り当てることが出来る。
※ 具体的な定義方法は次回に詳しく説明する。

グリッドアイテムを配置する方法は以下の3つ。

例として、グリッドコンテナで以下のようなグリッドを定義したとする（行：ライン1〜5、列：ライン1〜4、エリア：a, b）

ここで任意のグリッドアイテムをエリアa, bに配置する場合、エリア名a, bを直接指定して配置するか、

のように、行、列のラインのstart, endを指定して配置することが出来る。

この際、配置方法を指定されない（もしくは明示的に自動配置を指定された）グリッドアイテムは自動的に左上→右下に向かって空きセルに配置される。自動配置の方法（行→列 or 列→行）はグリッドコンテナにて指定することが出来る。

次回：使い方（グリッドコンテナ、アイテムの作り方）