概要
CSSを使った様々なレイアウト方法の検証と考察。
実装
@kura07氏のCSS Grid Layout を極める！（基礎編）で例示されている以下のレイアウトを様々な方法で実装した。要素によって width と height をそれぞれ固定ないし可変にしている。
なお、個人的なコードの書きやすさから、HTMLはPug、CSSはSCSSで記述している。
float + calc()
calc() 関数を用いて可変部の長さを動的に計算する。どの要素で float がどちらに向いているのかを把握し、必要に応じてclearfixなどの対応をしなければならない。
See the Pen calc() by Takuya HARA (@takuyahara) on CodePen.
ブラウザ対応状況
https://developer.mozilla.org/ja/docs/Web/CSS/calc#Browser_compatibility
Flexbox
要素を並べる方向を縦か横の1次元で指定する。縦横へのレイアウトが入り乱れる場合は、都度ラッパー要素が必要であり、今回の例ではラッパー要素を3つ使用している。
See the Pen Flexbox by Takuya HARA (@takuyahara) on CodePen.
ブラウザ対応状況
https://developer.mozilla.org/ja/docs/Web/CSS/flex#Browser_compatibility
Grid Layout
要素を並べる方向を縦横の2次元で指定するため、ラッパー要素は1つだけで良い。テーブルレイアウトをCSSで実現したようなもので、直感的で分かりやすい。最新のプロパティであるためレガシーブラウザへの対応が課題か。
See the Pen Grid Layout by Takuya HARA (@takuyahara) on CodePen.
ブラウザ対応状況
https://developer.mozilla.org/ja/docs/Web/CSS/grid-template#Browser_compatibility
おまけ
Table Layout
かつて使われていたtableタグを用いたレイアウト。直感的でレガシーブラウザにも対応するが、セマンティクスの観点から推奨されない。
See the Pen Table Layout by Takuya HARA (@takuyahara) on CodePen.