CSS Grid Generator

CSS Gridレイアウトをビジュアルに設計。行列数・サイズ・gap・配置を調整してCSSコード生成。

列 (Columns): 3

行 (Rows): 3

列サイズ

行サイズ

列gap: 8px

行gap: 8px

justify-items

align-items

プレビュー (3 x 3)

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

CSS Grid Generatorの使い方

CSS Gridの行列数、セルサイズ、gap、配置をスライダーとドロップダウンで直感的に設定できます。リアルタイムプレビューでレイアウトを確認し、生成されたCSSコードをコピーしてそのまま使えます。 grid-template-columns、grid-template-rows、gap等の主要プロパティに対応しています。

How to Use the CSS Grid Generator

This visual CSS Grid layout generator lets you design grid layouts interactively. Set the number of columns and rows, cell sizing (fr, auto, fixed px, or minmax), gap spacing, and item alignment. The live preview updates as you adjust controls, and the generated CSS code is ready to copy. Supports all major grid container properties including grid-template-columns, grid-template-rows, column-gap, row-gap, justify-items, and align-items. Perfect for prototyping responsive layouts.

よくあるエラーと対処 / Common Errors and Fixes

症状 / Symptom	原因 / Cause	対処 / Fix
fr が期待通り分割しない fr units not dividing as expected	fr は「余り」を分配する単位。固定幅・gap を引いた残りが対象 fr distributes the leftover space	固定幅と混在させる場合は余りの計算を意識する Account for fixed tracks and gaps first
auto-fit と auto-fill の違い auto-fit vs auto-fill	fill は空トラックを残し、fit は空トラックを潰して広げる fill keeps empty tracks; fit collapses them	カードを伸ばしたいなら auto-fit + minmax Use auto-fit with minmax for stretching cards
意図しない行が生える Unexpected implicit rows	定義外のアイテムは暗黙グリッド(grid-auto-rows)に配置される Overflow items create implicit tracks	grid-auto-rows で暗黙行のサイズも指定しておく Define grid-auto-rows explicitly
1アイテムだけ複数セルに広げたい Spanning multiple cells	コンテナ設定だけでは個別スパンは制御できない Container props don't control item spans	アイテム側に grid-column: span 2 等を指定 Use grid-column/row span on the item
Flexbox とどちらを使うか迷う Grid or Flexbox?	1次元の並びか2次元の格子かで適性が違う 1-D flow vs 2-D layout	行も列も揃えるならGrid、1方向の整列ならFlexbox Grid for 2-D, Flexbox for 1-D

定番レシピ / Recipes

/* レスポンシブカードグリッド(メディアクエリ不要) */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;

/* 聖杯レイアウト */
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;

Why browser-only?

Grid experimentation thrives on instant iteration. This generator renders real CSS Grid in a live preview entirely in your browser — zero latency, offline-capable, nothing transmitted. Pair it with the Flexbox Generatorfor one-dimensional layouts.

プレビューもコード生成もブラウザ内で完結します。1次元の整列はFlexbox Generatorをどうぞ。