5-3-2_Grid 実務テクニック チートシート

このチートシートでは、Gridの基本機能に加え、レスポンシブなカラム数や複雑なアイテム配置を効率的に実現するテクニックをまとめます。

1. レスポンシブグリッドの構築（コンテナ）

デバイスサイズに応じて列数や幅を自動調整するために使用される、最も重要なテクニックです。

プロパティ	値	役割と動作
minmax() 関数	minmax(250px, 1fr)	トラックの最小サイズと最大サイズを定義します。この例では、最小幅は250px、最大幅は利用可能な空間を均等に分け合う1frとなります。
repeat() + auto-fit	repeat(auto-fit, minmax(250px, 1fr))	コンテナの幅に応じて、可能な限り多くの列を自動で配置します。minmax()の最小サイズを確保しつつ、コンテナ内に収まるように自動調整されます。
repeat() + auto-fill	repeat(auto-fill, minmax(250px, 1fr))	auto-fitと似ていますが、空のトラックも作成し続けます。アイテムが少ない場合でも、トラックの数が埋まり、レイアウトが崩れにくいのが特徴です。
grid-template-areas	"h h h" "s m m" "f f f"	ヘッダー、サイドバー、メインコンテンツ、フッターなどの主要なページ領域を名前で定義します。メディアクエリと組み合わせることで、スマホ・タブレット・PCで領域名を変更するだけで簡単にレイアウトを切り替えられます。

2. 動的なコンテンツと暗黙的なトラック

グリッド構造を事前に定義せずに、アイテムが追加されたときに自動生成されるトラック（暗黙的なトラック）のサイズを制御します。

プロパティ	値	役割と動作
grid-auto-rows	150pxまたはminmax(100px, auto)	アイテムが明示的に配置されていないときに、Gridが自動で生成する行（Row）のサイズを定義します。コンテンツの高さが不定の場合に便利です。
grid-auto-flow	dense	アイテムの配置に空き（ギャップ）がある場合、後続のアイテムを前に詰めて配置します。パッキングとも呼ばれ、隙間を最小限に抑えたい場合に有効です。
gap	1rem	grid-row-gapとgrid-column-gapのショートハンドです。現在はgrid-gapではなくgapを使用することが一般的です。

3. アイテムの配置と重ね合わせ（アイテム）

アイテムが複数のセルを占有したり、セルの間でオーバーラップしたりする際のテクニックです。

プロパティ	値	役割と動作
span キーワード	grid-column: span 3;	列線や行線を明示的に指定する代わりに、現在地から何トラック分を占有するかを定義します。
セル重ね合わせ	grid-area: 1 / 1 / 3 / 3;	複数のアイテムに同じグリッド配置（例: 1行目・1列目から開始）を指定し、z-indexを使用することで、アイテムを正確に重ね合わせることができます。
grid-area (名前)	grid-area: header;	コンテナ側でgrid-template-areasが定義されている場合、アイテム名を指定するだけで配置が完了します。

4. 整列とセンタリング（ショートハンド）

アイテム（self）またはコンテンツ全体（content）を、セル内で素早く中央揃えするために使用されます。

プロパティ	値	役割と動作
place-items	center	justify-itemsとalign-itemsをまとめて中央揃えにします。最も一般的なセンタリング手法の一つです。
place-content	center	justify-contentとalign-contentをまとめて中央揃えにします。グリッド全体がコンテナ内で中央に配置されます。
place-self	center	justify-selfとalign-selfをまとめて中央揃えにします。個々のアイテムをセル内で中央に配置します。
grid	grid-template-rows / grid-template-columns	以下のプロパティをまとめて定義する究極のショートハンドです。非常に簡潔に書けますが、可読性が低下する場合もあるため注意が必要です。
	例: grid: 100px auto / 1fr 2fr;	（行の定義） / （列の定義）

Kindle本のご案内