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

<p>たった1行で便利なレイアウトを作れるCSSプロパティ<br /> - 中央寄せ! → place-items: center<br /> - パンケーキ分解 → flex: [grow] [shrink] [baseWidth]<br /> - サイドバー → grid-template-columns: minmax([min],[max])<br /> - パンケーキ積み → grid-template-rows: auto 1fr auto <br /> - クラシックWeb → grid-template: auto 1fr auto / auto 1fr auto<br /> - 12スパングリッド → grid-template-columns: repeat(12, 1fr)<br /> - RAM (Repeat, Auto, MinMax) → grid-template-columns: repeat(auto-fit, minmax([base], 1fr))<br /> - 間隔を維持 → justify-content: space-between<br /> - スタイルを維持 → width: clamp([min], [actual], [max])<br /> - 比率を維持 → aspect-ratio → [width] / [height]</p>

[xguru]

<p>`place-items` とパンケーキは本当に便利ですね。</p>