CSS GRID
CSS Gridジェネレーター
列・行のトラック、gap、整列、Item配置を操作し、結果をリアルタイムで確認できます。基本グリッドと、auto-fit・auto-fillを使うレスポンシブグリッドに対応します。
設定はブラウザ内だけで処理され、保存・外部送信されません。
GENERATOR
配置を設定してCSSを作成
入力が有効な間だけプレビューとコードへ反映します。
プリセット
Container設定
明示グリッド、gap、整列、自動配置を設定します。
列トラック
行トラック
空きを埋めるため見た目の順序がソース順と異なる場合があります。読み上げ順やキーボード順の代用にしないでください。
Item設定
Item 1を編集中
orderは見た目の順序だけを変更します。正しいHTMLのソース順の代用にしないでください。
リアルタイムプレビュー
Itemをクリックすると、そのItemの設定へ切り替わります。
生成CSS・HTML
初期値から変更したItemだけ個別CSSを追加します。
Container CSS
Container・Item CSS
HTML例
CSS Gridとは？
CSS Gridは、列と行の2次元で要素を配置できるレイアウト方式です。列・行を区切る線がGrid line、その間がtrack、交差してできる区画がcellです。Grid Itemは自動配置するほか、line番号やspanで明示配置できます。
仕様の基準：W3C CSS Grid Layout Module Level 2、W3C CSS Box Alignment Module Level 3
列・行とtrack sizing
grid-template-columnsとgrid-template-rowsで明示トラックを定義します。frは利用可能な残り空間の比率、autoやmin-content・max-contentは内容に基づくサイズです。同じトラックはrepeat()で短く出力します。
minmax(最小, 最大)は範囲を指定します。仕様上、最小側にflex値のfrは使えません。fit-content()は内容に応じて伸びつつ指定上限を持たせます。
auto-fitとauto-fillの違い
どちらも利用可能幅に応じて繰り返し数を決めます。auto-fitは空の繰り返しトラックを折りたたむため、少ないItemが幅を埋めやすくなります。auto-fillは空トラックも残すため、将来入る位置を保ちたい場合に向きます。本ツールはminmax(最小幅, 1fr)と組み合わせます。
line・span・暗黙グリッド
grid-column: 1 / span 2は1番lineから2トラック分、1 / -1は先頭から最後の明示lineまでを表します。line番号に0はありません。明示範囲外へ置いた場合や自動配置で足りない場合、grid-auto-rows・grid-auto-columnsを使う暗黙トラックが作られます。
Item同士の重なりはCSS Gridで許可される正常な表現です。一方、denseやorderは視覚順だけを変えることがあり、HTMLの意味のあるソース順を置き換える目的には使わないでください。
items・content・selfの整列
justify-items・align-itemsは各cell内の全Item、justify-self・align-selfは個別Itemを整列します。justify-content・align-contentはGrid全体がContainerより小さいとき、そのGrid全体を配置します。プレビューの固定幅・高さはこの違いの確認専用です。
よくある質問
CSS Gridとは何ですか？
列と行の2方向で要素を配置するCSSレイアウト方式です。
Flexboxとの違いは？
Gridは2次元の列・行、Flexboxは主に1次元の並びと空間配分が得意です。
fr単位とは？
Grid Container内の利用可能な残り空間を比率で配分する単位です。
repeat()は何をしますか？
同じtrack listingを指定回数、またはauto-fit・auto-fillの条件で繰り返します。
minmax()の最小値にfrは使えますか？
使えません。本ツールでも最小値の選択肢から除外しています。
fit-content()とは？
内容に応じて伸縮しつつ、指定した長さ・割合を上限の目安にするtrack sizing functionです。
auto-fitとauto-fillはどちらを選ぶ？
空トラックを折りたたみItemを広げたいならauto-fit、空位置も保ちたいならauto-fillが目安です。
gapとmarginの違いは？
gapはトラック間のgutterです。Item外側のmarginとは用途と計算が異なります。
line番号の-1は何ですか？
明示Gridの末尾側から数えた最初のline、つまり最後のlineを示します。
spanとは何ですか？
開始lineから何トラック分を占めるかを表します。
Itemが重なってもよいですか？
CSS Gridでは重なりが許可されます。意図しない重なりでないか確認してください。
denseを使う注意点は？
空きを埋めるため視覚順がソース順と異なる場合があります。
orderでHTML順も変わりますか？
変わりません。表示上の順序だけで、読み上げや通常のフォーカス順はソース順が基準です。
subgridに対応していますか？
今回のツールでは対応していません。親Gridとtrackを共有する高度な機能のため対象外です。
名前付きline・areaやmasonryに対応していますか？
対応していません。安全で分かりやすい数値lineと標準的なGrid機能に絞っています。