CSS Gridでページレイアウトを作る

やりたいこと

レイアウトの形は決まっている（サイドバーと本文、カードの壁、雑誌風ページ）のに、正確なgrid-template構文が思い出せない。ビジュアル生成器なら、試行錯誤の結果をそのままコピー可能なCSSに変えられます。

グリッドを組む

列数・行数・ギャップを設定し、プレビューのセルをクリックして結合（スパン）を指定します。出力は2ブロック。コンテナ用のdisplay: gridとgrid-template-columns/rows、各アイテムのgrid-column/grid-rowです。

• 列幅はfr単位（空きを分配）か固定pxを選べます。
• プレビューは出力CSSと同じ数値で描くので、見たままがそのまま反映されます。

具体例

3列ギャラリーで先頭の2×2ヒーロータイル。列3・行2・ギャップ16pxにして、セル1を2列2行にスパンします。コンテナのルールとヒーロー用アイテム1ルールをコピーすれば完成です。

対応範囲

列・行はそれぞれ12まで、単位はpxとfrのみ。minmax()やauto-fit/auto-fill、名前付きエリアには対応しません。ビューポートで形を変えるレスポンシブグリッドは、メディアクエリかgrid-areaを手で書いてください。