CSS Grid プレイグラウンド
無料のオンライン CSS Grid プレイグラウンド兼ジェネレーター。列と行のトラック（fr・px・auto・minmax）を編集し、番号付きグリッド線に沿ってアイテムを配置して CSS をコピーできます。
CSS Grid プレイグラウンド
無料のオンライン CSS Grid プレイグラウンド兼ジェネレーター。列と行のトラック（fr・px・auto・minmax）を編集し、番号付きグリッド線に沿ってアイテムを配置して CSS をコピーできます。
CSS Grid レイアウトについて
列と行を画面で組み立てる
Grid コンテナは grid-template-columns と grid-template-rows で列・行トラックを定義します。1fr 2fr 120px や minmax(120px, 1fr) などを入力し、gap とアイテムの配置を調整すると、プレビューが連動して更新されます。すぐ使える形から始めたいときは、聖杯レイアウトまたはカードウォールのプリセットを読み込んで編集できます。
トラックは領域、グリッド線は境界
3 本の列トラックからは、各トラックの両側に境界が必要なため、番号付きの列線が 4 本できます。そのため grid-column: 1 / 3 は線 1 から始まり、最初の 2 トラックをまたいで線 3 で終わります。プレビュー周囲の番号付きドットで、この線を基準にした配置を確認できます。
各アイテムを配置して CSS をコピー
ボックスを選択すると、grid-column と grid-row の開始線・終了線を設定し、justify-self または align-self でそのアイテムだけの配置を調整できます。有効な変更はコピー可能な CSS にすぐ反映されます。現在の版は明示的なトラックと線による配置に焦点を当てているため、repeat()、auto-fill、auto-fit、subgrid、名前付き grid-template-areas には対応していません。
よくある質問
このテーマに関するよくある疑問と回答をまとめました。
この CSS Grid ジェネレーターでは何ができますか？
列・行トラックの定義、gap と配置の調整、ボックスの追加、番号付きグリッド線の間への各ボックスの配置、レイアウトのプレビュー、コンテナとアイテムの CSS のコピーができます。プリセットから一般的なレイアウトをすぐ試せます。
grid-column: 1 / 3 はどういう意味ですか？
アイテムを列線 1 から列線 3 まで配置する指定で、その間にある 2 つのトラックをまたぎます。数字は占有する列数ではなく、グリッド線の番号です。
CSS Grid の fr、auto、minmax() は何を意味しますか？
fr は残りの空間を柔軟な比率で分け、auto は内容と利用可能な空間からトラックサイズを決め、minmax(最小値, 最大値) はトラックの下限と上限を指定します。このエディターでは 120px のような固定ピクセル値も使えます。
Flexbox ではなく CSS Grid を使うのはどんなときですか？
ページの骨組みやカードのマトリクスのように、行と列を連動させる 2 次元レイアウトには Grid が向いています。1 行または 1 列だけなら Flexbox の方が一般に簡単です。両者は併用でき、Grid アイテム自体を Flex コンテナにすることもできます。
repeat()、auto-fit、subgrid、名前付きグリッド領域に対応していますか？
現在は対応していません。番号付きグリッド線を予測しやすく保つため、トラックエディターは明示的な fr、px、auto、minmax() の値を受け付けます。repeat()、auto-fill、auto-fit、subgrid、grid-template-areas は現在の版の対象外です。