CSS Grid Generator
ブラウザ内で処理CSS Gridレイアウトをビジュアルに設計。行列数・サイズ・gap・配置を調整してCSSコード生成。
生成CSS
.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.
Gridのfr配分・空トラック・行追加の対処 / Fixing Grid fr sizing, empty tracks, and implicit rows
| 症状 / 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 |
CSS Gridの可変列と聖杯レイアウト / CSS Grid Responsive Columns and Holy Grail Layout
/* レスポンシブカードグリッド(メディアクエリ不要) */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
/* 聖杯レイアウト */
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;CSS Gridを通信なしで即時プレビュー / Previewing CSS Grid instantly without network requests
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をどうぞ。
🔒 すべての処理はブラウザ内で完結し、入力データはサーバーへ送信されません。登録不要・無料。 / All processing runs in your browser; nothing is uploaded. Free, no sign-up. プライバシーポリシー / Privacy Policy