このツールについて
等幅モードは `repeat(n, 1fr)` で列を均等に分割します。自動折り返しモードは `repeat(auto-fit, minmax(...))` を使い、メディアクエリを 1 行も書かずに折り返す仕組みを作ります。カスタムモードでは `1fr 2fr 1fr` のようなトラックリストを直接入力できます。入力値は数値と単位に解析し直してから再構成するため、不正な部分は取り込まれません。
CSS / FRONTEND · ブラウザ内で処理
CSS Grid ジェネレーター
列数・行数・間隔・揃え方を設定し、プレビューしながら grid CSS を出力。
プレビューは最大 12 列 12 行。等幅・自動折り返し・カスタムトラックの 3 モードに対応します。
1
2
3
4
5
6
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 12px;
justify-items: stretch;
align-items: stretch;
}列トラック
列モード
間隔と揃え
操作手順
- 等幅・自動折り返し・カスタムのいずれかを選びます。
- 列数・行数と行間・列間を設定します。
- アイテムの揃え方を調整し、grid CSS をコピーします。
プライバシー
計算もプレビューもすべてこのブラウザ内で行われます。入力が送信・保存されることも、URL やログに記録されることもありません。
よくある質問
- auto-fit と auto-fill の違いは。
- どちらも列数を自動で決めます。auto-fill は空のトラックをそのまま残し、auto-fit は空のトラックを畳んで既存のアイテムを引き伸ばします。少数のアイテムでも横幅いっぱいに広げたい場合は auto-fit、列幅を固定したい場合は auto-fill を使います。
- fr と auto はどう使い分けますか。
- fr は余った領域を分配するため、1fr は内容の長さに関係なく等分の幅を取ります。auto は内容に応じた幅になります。列幅を揃えたいときは fr、内容に合わせたいときは auto を使います。