1行のCSSで作るモダンレイアウト

たった1行で便利なレイアウトを作れるCSSプロパティ

• 中央寄せ! → place-items: center

• パンケーキ分解 → flex: [grow] [shrink] [baseWidth]

• サイドバー → grid-template-columns: minmax([min],[max])

• パンケーキ積み → grid-template-rows: auto 1fr auto

• クラシックWeb → grid-template: auto 1fr auto / auto 1fr auto

• 12スパングリッド → grid-template-columns: repeat(12, 1fr)

• RAM (Repeat, Auto, MinMax) → grid-template-columns: repeat(auto-fit, minmax([base], 1fr))

• 間隔を維持 → justify-content: space-between

• スタイルを維持 → width: clamp([min], [actual], [max])

• 比率を維持 → aspect-ratio → [width] / [height]

[xguru]

place-items とパンケーキは本当に便利ですね。