CSS Grid ジェネレーター

出力されるルール

ジェネレーターが出力するのは .container ルール 1 つで、宣言は display: grid、grid-template-columns、grid-template-rows、column-gap、row-gap の 5 つに固定です。スタイルシートに貼り付けて、.container を自分のクラス名に書き換えます。

このルールが決めるのはコンテナだけです。子要素には何も書かなくても、HTML に書いた順にセルへ 1 つずつ入り、1 行が埋まると次の行に進みます。プレビューも同じ考え方で、常に「列数 × 行数」個の色付きセルを描きます。テンプレートに書いた列の数が「列数」と違うと、余ったセルは暗黙の行に回ります。実際のページの子要素と同じ動きです。

例 1：初期状態の 3 列 × 2 行

ページを開いた直後、何も操作していない状態の出力です。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 1rem;
  row-gap: 1rem;
}

fr の取り分はギャップを差し引いてから計算されます。ルートの文字サイズが 16px なら 1rem は 16px なので、幅 960px のコンテナでは 1 列が (960 − 2 × 16) ÷ 3 ≒ 309.33px になります。行の 1fr はコンテナの高さが決まっていないと中身から高さを求め、いちばん高い行にそろえます。中身に合わせたいだけなら、行テンプレートを repeat(2, auto) にします。

例 2：管理画面のサイドバーとメイン

左に固定幅のメニュー、右にメイン、上にヘッダーバー、下にフッターという管理画面の骨組みです。列数を 2、行数を 3 にしてから「カスタムテンプレート」を開き、列テンプレートに 200px minmax(0, 1fr)、行テンプレートに 64px 1fr 48px を入れます。列ギャップは 2rem、行ギャップは 0 です。

.container {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-rows: 64px 1fr 48px;
  column-gap: 2rem;
  row-gap: 0;
}

幅 1280px なら、メニュー列は 200px、ギャップ 32px を引いた残りの 1048px がメイン列です。入力の順番には注意が必要です。列数を変えると列テンプレートが repeat(N, 1fr) に、行数を変えると行テンプレートが書き戻されます。ギャップを変えてもテンプレートは残ります。ヘッダーとフッターを 2 列にまたがらせるには、その要素に grid-column: 1 / -1 を自分で書き足します。

日本語の文章と URL で 1fr の列幅が変わる理由

minmax() の外に書いた fr について、仕様（CSS Grid Level 2 の 7.2.1 節）は implies an automatic minimum (i.e. minmax(auto, <flex>)) と書いています。列は中身の最小幅より狭くならない、という意味です。日本語の文章はほぼどの文字のあいだでも改行できるので最小幅は 1 文字分しかなく、1fr の列は均等のままです。ところが URL や長い英単語のように途中で改行できない文字列が入ると、その長さが列の最小幅になります。

CSS Grid の使い方の解説記事で、幅 600px の repeat(3, 1fr) の真ん中のセルに文章を入れて Chrome 152 で測った結果は次のとおりでした。

• 日本語だけの文：200px 200px 200px
• 文中に URL を 1 本含む文：107.297px 385.398px 107.305px

例 2 のメイン列を minmax(0, 1fr) にしたのはこのためです。最小値を 0 にすると、記事中の長い URL があってもメイン列は押し広げられません。セルの側に overflow-wrap: anywhere を付けて、URL をどこでも折り返せるようにする方法もあります。

全角数字のギャップは無効になる

日本語入力をオンにしたまま数字を打つと、設定によっては全角の １６px になります。ジェネレーターは値を検証しないので、そのまま出力します。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: １６px;
  row-gap: 1rem;
}

全角数字は CSS の数値として読まれないので、column-gap: １６px は無効な宣言として捨てられ、列のあいだは初期値の normal（グリッドでは 0）になります。テンプレートに全角スペース（U+3000）を入れた場合も同じで、宣言ごと無視されます。プレビューは最後に有効だった値のまま変わらないので、「値を変えたのにプレビューが動かない」ときは全角になっていないか確かめてください。

制限

• 出力はコンテナのルールだけです。grid-column・grid-row・grid-template-areas・名前付きライン・揃えの入力欄はありません。
• 列数は 1〜12、行数は 1〜8 です。それより大きい数は 12 列・8 行として扱います。
• テンプレートとギャップの欄は検証しません。repeat(3 1fr) のような無効な値もそのままコピーされます。
• プレビューのセル数は常に「列数 × 行数」で、テンプレートの列数には合わせません。

トラックサイズの規則は CSS Grid Layout Module Level 2 にあります。一方向に並べるだけなら CSS Flexbox ジェネレーターのほうが手軽です。