CSS Grid Layout（グリッドレイアウト）は、2次元レイアウトを HTML/CSS を使って簡単・自由に操作できるCSSの機能である。
格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になる。
Grid Layoutの用語
| コンテナ | グリッド全体を囲む要素。display: grid; または display: inline-grid; を指定することで、その要素は Grid Layout のコンテナになる |
| アイテム | コンテナの子要素です。コンテナの直接の子要素は基本的にすべてアイテムになる |
| ライン | グリッドを分ける垂直および水平の線のこと。グリッドの上下左右それぞれの両端にも存在する。ラインには、上あるいは左から1から順に正の番号が振られている。同時に、下あるいは右からは-1から順に負の番号が振られている（0という番号のラインは存在しない） |
| トラック | グリッドの行および列のこと。言い換えればトラックとは、隣接する2本のラインの間を表している |
| セル | 隣接する垂直および水平方向のラインが作る、アイテムを配置できる最小の単位 |
| エリア | 一つあるいは複数のセルが結合してできるセルの集まり。エリアには名前を付けることができ、アイテムを配置できる |
HTMLと必須のCSSを記述する
記述しなければならない要素は、コンテナとアイテムだけである。
各々のアイテムは、コンテナの子要素として記述する。
<div id="container"> <!-- コンテナ -->
<div id="itemA">A</div> <!-- アイテム -->
<div id="itemB">B</div> <!-- アイテム -->
<div id="itemC">C</div> <!-- アイテム -->
</div>#container {
display: grid; /* グリッドレイアウト */
}CSS Gridの各プロパティ（親要素）
grid-template-columnsプロパティ
grid-template-columnsプロパティは、行の数と幅を定義するために使用する。各行に個別の幅を定義するか、repeat()関数を使用してすべての行に均一な幅を定義することもできる。
/* 各行に個別の幅を定義 */
grid-template-columns: 200px auto 100px;
/* すべての行に均一な幅を定義 */
grid-template-columns: repeat(3, 1fr);grid-template-rowsプロパティ
grid-template-rowsプロパティは、列の数と高さを定義するために使用する。各列に個別の高さを定義するか、repeat()関数を使用してすべての列に均一な高さを定義することもできる。
/* 各列に個別の幅を定義 */
grid-template-rows: 200px auto 100px;
/* すべての列に均一な幅を定義 */
grid-template-rows: repeat(3, 1fr);grid-template-areasプロパティ
grid-template-areasプロパティは、グリッドのセルが親コンテナの中に列と行のエリアを保持するために使用される。このプロパティを使用すると、レイアウトを視覚的に確認できるため、非常に簡単になる。
A, B, Cの各アイテムのエリアをどのように保持するかは、下記のように定義する。
/* 各セルのレイアウトを定義 */
grid-template-areas:
"AAAA AAAA AAAA"
"BBBB BBBB BBCC"
"BBBB BBBB BBCC";column-gapプロパティ
column-gapプロパティは、グリッド内の行に並んだアイテムの間にギャップ（スペース）を配置するために使用する。
column-gap: 50px;row-gapプロパティ
row-gapプロパティは、グリッド内の列に並んだアイテムの間にギャップ（スペース）を配置するために使用する。
row-gap: 50px;gapプロパティ
gapを使えば、グリッド間の行と列の余白を一括で指定できる。
/* 行間と列間に10pxの余白を指定する */
gap: 10px;
/* 列間に10px、行間に20pxの余白を指定する */
gap: 10px 20px;justify-itemsプロパティ
justify-itemsプロパティは、主軸（Main Axis／X軸）に沿ってアイテムを配置するために使用する。使用できる値は、4つである。
- start：先頭に配置
- end：後尾に配置
- center：中央に配置
- stretch：コンテナに収まるように伸縮
align-itemsプロパティ
align-itemsプロパティは、交差軸（Cross Axis／Y軸）に沿ってアイテムを配置するために使用する。使用できる値は、4つである。
- start：先頭に配置
- end：後尾に配置
- center：中央に配置
- stretch：コンテナに収まるように伸縮
justify-contentプロパティ
justify-contentプロパティは、主軸（Main Axis／X軸）に沿ってグリッドコンテナ内のグリッドを配置するために使用する。使用できる値は、7つである。
- start：先頭に配置
- end：後尾に配置
- center：中央に配置
- stretch：コンテナに収まるように伸縮
- space-between：先頭と後尾は端に残りは等間隔に配置
- space-around：すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔
- space-evenly：すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔
align-contentプロパティ
align-contentプロパティは、交差軸（Cross Axis／Y軸）に沿ってグリッドコンテナ内のグリッドを配置するために使用する。使用できる値は、7つである。
- start：先頭に配置
- end：後尾に配置
- center：中央に配置
- stretch：コンテナに収まるように伸縮
- space-between：先頭と後尾は端に残りは等間隔に配置
- space-around：すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔
- space-evenly：すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔
CSS Gridの各プロパティ（子要素）
grid-column: start/end; grid-row: start/end;
grid-columnとgrid-rowは、複数の行・列を結合するために使用する。
grid-column: start/end;は、grid-column-startとgrid-column-endのショートハンド。グリッドエリアの行の開始と終了の端を指定する。
同時に、grid-row: start/end;は、grid-row-startとgrid-row-endのショートハンド。グリッドエリアの列の開始と終了の端を指定する。
.item {
/* アイテムの配置位置を「行方向：ライン番号2から3の間」に指定 */
grid-row: 2 / 3;
grid-row: 2;
/* アイテムの配置位置を「列方向：ライン番号2から3の間」に指定 */
grid-column: 2 / 3;
grid-column: 2;
/* アイテムの配置位置を「行方向：ライン番号１から３の間」に指定 */
grid-row: 1 / 3;
/* アイテムの配置位置を「列方向：ライン番号２から４の間」に指定 */
grid-column: 2 / 4;
}grid-areaプロパティ
最初にgrid-template-areasプロパティを定義する必要がある。完了したら、下記のように子クラス内の親クラスで使用する名前を定義する。
前述と同様に、grid-template-areasプロパティを定義する。
grid-template-areas:
"AAAA AAAA AAAA"
"BBBB BBBB BBCC"
"BBBB BBBB BBCC";次に、grid-areasプロパティで子クラス内の親クラスで使用する名前を定義する。
.image-1{ grid-area: A; }
.image-2{ grid-area: B; }
.image-3{ grid-area: C; }justify-selfプロパティ
justify-selfプロパティは、主軸（Main Axis／X軸）に沿ってグリッドコンテナ内に1つのグリッドアイテム（子アイテム）を配置するために使用する。使用できる値は、4つである。
- start：先頭に配置
- end：後尾に配置
- center：中央に配置
- stretch：コンテナに収まるように伸縮
align-selfプロパティ
align-selfプロパティは、交差軸（Cross Axis／Y軸）に沿ってグリッドコンテナ内に1つのグリッドアイテム（子アイテム）を配置するために使用する。使用できる値は、4つである。
- start：先頭に配置
- end：後尾に配置
- center：中央に配置
- stretch：コンテナに収まるように伸縮
CSS Gridのショートハンド
CSS Gridのショートハンドを覚えると、実装の時短になる。
place-content: align-content / justify-content;
place-items: align-items / justify-items;
place-self: align-self / justify-self;
grid-template: grid-template-rows / grid-template-columns;
gap: row-gap column-gap;