5-3-1_Grid 基本プロパティ チートシート

CSS Gridは、行 (row) と列 (column) を使って二次元のレイアウトを定義し、アイテムを柔軟に配置するための強力なレイアウトシステムです。

1. Gridコンテナ（親要素）に適用するプロパティ

これらのプロパティは、グリッド構造全体と、その中のアイテムの配置方法を制御します。

プロパティ	値	役割と動作
display	grid	要素をGridコンテナに変換します。これがなければGridは動作しません。
grid-template-columns	1fr 1fr 1frなど	列（Column）の幅を定義します。値の数だけ列が生成されます。
grid-template-rows	auto 100px 1frなど	行（Row）の高さを定義します。値の数だけ行が生成されます。
fr 単位	1fr 2fr	グリッド内の利用可能な残りの空間の比率を定義します。この例では、1:2の比率で空間を分け合います。
repeat() 関数	repeat(3, 1fr)	複数の行または列を同じサイズで繰り返すための簡潔な記法（1fr 1fr 1frと同じ）。
grid-gap (または gap)	10px または 10px 20px	行と列の**間隔（ガター）**を定義します。一行の値は両方、二行の値は (row-gap) (column-gap) を意味します。
grid-template-areas	"header header" "sidebar main"	グリッドに名前付きエリアを定義し、アイテムを名前で配置できるようにします。
justify-items	center, start, end, stretch	グリッドセル内で、アイテムを**インライン方向（列軸）**に整列します。
align-items	center, start, end, stretch	グリッドセル内で、アイテムを**ブロック方向（行軸）**に整列します。
justify-content	center, space-betweenなど	グリッド全体をインライン方向に整列します（グリッドの合計サイズがコンテナより小さい場合）。
align-content	center, space-betweenなど	グリッド全体をブロック方向に整列します（グリッドの合計サイズがコンテナより小さい場合）。

2. Gridアイテム（子要素）に適用するプロパティ

これらのプロパティは、個々の子要素をグリッド構造内の特定の位置に配置するために使用されます。

プロパティ	値	役割と動作
grid-column-start	数値 または 名前	アイテムが開始する列線を定義します。
grid-column-end	数値 または 名前	アイテムが終了する列線を定義します。
grid-column	start / end	grid-column-startとgrid-column-endのショートハンド。例: 1 / span 3 (1行目から3列分を占有)
grid-row-start	数値 または 名前	アイテムが開始する行線を定義します。
grid-row-end	数値 または 名前	アイテムが終了する行線を定義します。
grid-row	start / end	grid-row-startとgrid-row-endのショートハンド。例: 2 / 4 (2行線から4行線までを占有)
grid-area	名前	コンテナで定義された名前付きエリアにアイテムを配置します。 (grid-template-areasを使用した場合)
justify-self	center, start, end, stretch	個々のアイテムを、自身のグリッドセル内で**インライン方向（列軸）**に整列します（親のjustify-itemsを上書き）。
align-self	center, start, end, stretch	個々のアイテムを、自身のグリッドセル内で**ブロック方向（行軸）**に整列します（親のalign-itemsを上書き）。

【ショートハンドの推奨】

grid-columnとgrid-rowを組み合わせたgrid-areaは、非常に便利です。

ショートハンド	意味
grid-area: 1 / 2 / 3 / 4;	grid-row-start (1) / grid-column-start (2) / grid-row-end (3) / grid-column-end (4) の順に定義します。

Kindle本のご案内