aduce ops

CSS Grid ジェネレーター

grid-template-columns / rows / gap をトラック編集で組み立て。 プリセット 8 種・リアルタイムプレビュー。

プリセット
grid-template-columns（列）
クイック:
grid-template-rows（行）
クイック:
gap10px
アイテム数6
プレビュー
1
2
3
4
5
6
CSS
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}

CSS Grid ジェネレーターとは

本ツールは、CSS Grid Layout のトラック定義（列・行）と gap を GUI で編集しながら結果をリアルタイム確認できる無料オンラインツールです。 2 次元レイアウトを構築するための主要プロパティを直感的に試行錯誤でき、 プリセット 8 種から代表的なレイアウト（サイドバー / 12 カラム / ダッシュボード / Holy Grail など）をワンクリックで呼び出せます。 生成された CSS はそのままコピーして使えます。

Grid と Flexbox の違い

どちらもレイアウトの主要技術ですが、得意分野が違います。

  • Flexbox — 1 次元レイアウト。 行 or 列のどちらか片方を制御。ナビバー、ボタン群、横並びカード、 フォームの縦並びなど
  • CSS Grid — 2 次元レイアウト。 行と列の両方を同時制御。ページ全体の骨格、ダッシュボード、 複雑なカードレイアウトなど

Grid で大きな枠を組み、各セル内では Flexbox で 1 次元配置、 という組み合わせも一般的です。

主要プロパティ

grid-template-columns / grid-template-rows

コンテナ内のトラック（列・行）のサイズをスペース区切りで列挙します。 単位の指定が豊富で、固定 px、可変 fr、内容依存 auto、minmax / repeat と 組み合わせ自在です。

grid-template-columns: 200px 1fr 200px;
grid-template-rows: 60px 1fr 40px;

fr 単位（fraction）

利用可能な空間を「分数」として割り振る単位。1fr 2frなら全体の 1/3 と 2/3 に分配されます。固定サイズ（px / %）と混在可能で、 固定分を引いた残りを fr で按分します。

repeat()

同じパターンの繰り返しを短く書く関数。

grid-template-columns: repeat(12, 1fr);
/* 上は「1fr × 12 個」を 1 行で書いたもの */

auto-fill / auto-fit + minmax()

コンテナ幅に応じて列数が自動的に増減するレスポンシブカードグリッドを 1 行で書ける強力なイディオムです。

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

minmax(200px, 1fr) が「最小 200px、可能なら fr で広がる」を意味し、auto-fill がそれを「コンテナに収まる限り繰り返す」役割を担います。 メディアクエリなしで自然にレスポンシブ化できるため、画像ギャラリーや 商品カード一覧で頻出します。

gap（row-gap / column-gap）

セル間の余白を一括指定。gap: 16px は行・列ともに 16px、gap: 16px 24px なら row 16px / column 24px と異なる値も指定可能です。 マージンで余白を作ると外周にも余白が残るのに対し、 gap はセル間にだけ余白を作る点が便利です。

grid-area / grid-column / grid-row

個々のアイテムを「何行〜何行・何列〜何列」のセルに配置するプロパティ。 ヘッダやサイドバーを「複数列／複数行にまたがる」配置にできます。

.header { grid-column: 1 / -1; }   /* 1 列目から最終列まで */
.sidebar { grid-row: 2 / 4; }     /* 2 行目から 4 行目（手前）まで */

grid-template-areas で命名されたエリアを使えば、 コードを「絵」のように書けて可読性が大幅に上がります。

典型レイアウト 5 例

1. サイドバー + 本文

grid-template-columns: 200px 1fr;
gap: 16px;

2. ヘッダ・本文・フッタ（縦 3 段）

grid-template-columns: 1fr;
grid-template-rows: 60px 1fr 40px;

3. レスポンシブカードグリッド

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;

4. Holy Grail（左サイド・本文・右サイド + ヘッダ + フッタ）

grid-template-columns: 200px 1fr 200px;
grid-template-rows: 60px 1fr 40px;

5. ダッシュボード

grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 60px 1fr 1fr;
gap: 12px;

使い方の流れ

  1. プリセットから近い形を選ぶ（または空から組み立て）
  2. 列のトラック値を編集（1fr / 200px / repeat(...) など）
  3. 必要に応じて行のトラックを追加・編集
  4. gap でセル間の余白を調整
  5. アイテム数を増やしてレイアウト挙動を確認
  6. 「コピー」で CSS を取得

よくあるつまずき

  • fr が思った通りに分配されない — 固定サイズ（px / %）を含むトラック合計を引いた「残り」を fr で按分するため、 固定サイズが大きいと fr の分け前は小さくなります
  • auto-fill と auto-fit の違い — auto-fill は空のトラックを残し、 auto-fit は空のトラックを潰してアイテムが広がります
  • 子要素がはみ出す — グリッドアイテムには既定でmin-width: auto が効くため、長い文字列があるとトラックが 縮みません。min-width: 0 や overflow: hidden で対処

関連ツール

プライバシー

操作内容はすべてブラウザ内で処理され、弊社サーバには送信しません。

関連ツール