CSSグリッドジェネレーター

CSSグリッドは、ページを行と列で同時にレイアウトします。このジェネレーターは、列と行のテンプレート（repeat()、fr、minmax()、auto-fill）、間隔、配置からコンテナのルールを書き出します。名前付きエリアを簡単なテキストのスケッチで入力すると、grid-template-areasと領域ごとにgrid-areaのルールを1つ作り、対応するHTMLも出力します。構文を先にチェックし、不明なトラックサイズ、長さの違う行、長方形でないエリアは、黙って無視せずに報告します。レイアウトはお使いのブラウザで描画されます。

使い方

1. 列のテンプレートを入力します。例：repeat(3, 1fr)や200px 1fr。
2. 必要なら行を入力し、名前付きエリアを1行に1つの行でスケッチします。
3. 行と列の間隔、アイテムの配置を設定します。
4. CSSとHTMLをコピーします。プレビューには、ブラウザが計算したレイアウトが表示されます。

計算式

display: grid; grid-template-columns: <トラック>; grid-template-rows: <トラック>; grid-template-areas: "a a" "b c"; gap: <行> <列>;

トラックは、長さ（200px）、可変の割合（1fr）、auto、min-content、max-content、minmax(min, max)、fit-content()のいずれかです。grid-template-areasでは、すべての行で同じ数のセルが必要で、各名前は長方形を覆う必要があります。「.」はセルを空にします。

計算例

列200px 1fr、行auto 1fr auto、エリア「header header / sidebar main / footer footer」は、定番のページレイアウトである2列 × 3行になり、gap: 16px 24pxで行の間に16 px、列の間に24 pxの間隔が入り、.header { grid-area: header; }のようなルールが作られます。既定のrepeat(3, 1fr)でアイテムが6個なら、同じ幅の3列 × 2行になります。