ライブで組むCSSグリッド
列・行の数と間隔を選ぶと、プレビューがセルをリアルタイム表示し、コンテナのCSSがコピー可能に。
-
列を設定
1〜8の等幅トラック（1fr）。
-
行とgapを設定
行数と間隔。
-
CSSをコピー
グリッドコンテナに適用。
コンテナのCSS（既定）
| プロパティ | 値 |
|---|---|
| display | grid |
| grid-template-columns | repeat(3, 1fr) |
| grid-template-rows | repeat(2, 1fr) |
| gap | 8px |
1fr 単位は空間を均等に分けます。レスポンシブには repeat(auto-fit, minmax(...)) に置換を。すべてローカル生成。
よくある質問
CSS GridとFlexboxの違いは？
Flexboxは1軸（行か列）に配置、Gridは2次元（列と行を同時に）で扱います。Gridはページ全体のレイアウト、Flexboxは単純な整列に向きます。
repeat(3, 1fr) の意味は？
「各1フラクションの列を3つ」の略記です。fr単位は利用可能な空間を均等に分けます。repeat(3, 1fr) はコンテナを埋める等幅の3列を作ります。
レスポンシブにするには？
固定数を repeat(auto-fit, minmax(200px, 1fr)) に置き換えると、列が幅に応じて自動調整されます。本ツールは固定数のベースを生成し、後で調整できます。
CSSはコンテナ用？セル用？
コンテナ用です。display: grid と grid-template 系プロパティが構造を定義。子セルは作られたトラックに自動配置されます。