CSSレイアウトジェネレーター

CSS GridとFlexboxの使い分け

CSS Gridは列と行を同時に扱う2次元レイアウト、Flexboxは主軸に沿って並べる1次元レイアウトです。ページ全体やカード一覧の骨組みにはGrid、ナビゲーションやボタン列など内容に沿う並びにはFlexboxが適しています。上のモードを切り替えても、それぞれの編集内容はページを離れるまで保持されます。

仕様の基準：W3C CSS Grid Layout Module Level 2、W3C CSS Flexible Box Layout Module Level 1

CSS Gridとは？

CSS Gridは、列と行の2次元で要素を配置できるレイアウト方式です。列・行を区切る線がGrid line、その間がtrack、交差してできる区画がcellです。Grid Itemは自動配置するほか、line番号やspanで明示配置できます。

grid-template-columns・grid-template-rowsで明示トラックを定義し、同じトラックはrepeat()で短く出力できます。

列・行と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全体を配置します。プレビューの固定幅・高さはこの違いの確認専用です。

Flexboxの主軸・折り返し・Item設定

Flexboxではflex-directionで主軸を決め、justify-contentで主軸方向、align-itemsで交差軸方向の配置を調整します。flex-wrapで折り返した複数lineにはalign-contentが働き、CSS Box Alignment仕様のgapで間隔を指定できます。

Itemごとのflex-grow・flex-shrink・flex-basisで空間配分を調整できます。row-reverse、column-reverseやorderは視覚順だけを変えるため、読み上げやキーボード順の代わりには使わないでください。