CSS Grid生成
CSS Gridレイアウトをライブプレビュー付きで視覚的に生成。列、行、ギャップ、テンプレートを調整。CSSコードをコピー。無料、100%ブラウザで動作。
プレビュー
CSS出力
リファレンス
CSS Gridとは？
CSS Gridは、行と列の2次元でコンテンツを配置するレイアウトシステムです。Flexboxが1次元のレイアウトに最適なのに対し、Gridは行と列の両方を同時に制御できます。複雑なページレイアウトやダッシュボードの作成に強力です。
グリッドテンプレート
grid-template-columns — 列のサイズと数を定義。1fr 1fr 1frで均等3列、repeat(3, 1fr)でも同じ。grid-template-rows — 行のサイズと数を定義。fr単位 — 利用可能なスペースの割合を指定。minmax() — 最小と最大のサイズ範囲を指定。auto-fill / auto-fit — レスポンシブな列数の自動調整。
プライバシー
すべての生成処理はブラウザで100%実行されます。データはサーバーに送信されません。