【CSS】レイアウト方法まとめ

# 概要
CSSを使った様々なレイアウト方法の検証と考察。

# 実装
@kura07氏の[CSS Grid Layout を極める！（基礎編）](https://qiita.com/kura07/items/e633b35e33e43240d363)で例示されている以下のレイアウトを様々な方法で実装した。要素によって `width` と `height` をそれぞれ固定ないし可変にしている。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f38373832322f35383366363238392d303931372d633037612d383361392d6233643733623833333565662e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286440/466c541c-9d53-325e-6d0e-0c9049868a1f.png)

なお、個人的なコードの書きやすさから、HTMLはPug、CSSはSCSSで記述している。

## float + calc()
`calc()` 関数を用いて可変部の長さを動的に計算する。どの要素で `float` がどちらに向いているのかを把握し、必要に応じてclearfixなどの対応をしなければならない。

<p class="codepen" data-height="450" data-theme-id="0" data-default-tab="css,result" data-user="takuyahara" data-slug-hash="NZLKJK" style="height: 450px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="calc()">
  <span>See the Pen <a href="https://codepen.io/takuyahara/pen/NZLKJK/">
  calc()</a> by Takuya HARA (<a href="https://codepen.io/takuyahara">@takuyahara</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

**ブラウザ対応状況**
https://developer.mozilla.org/ja/docs/Web/CSS/calc#Browser_compatibility

## Flexbox
要素を並べる方向を縦か横の1次元で指定する。縦横へのレイアウトが入り乱れる場合は、都度ラッパー要素が必要であり、今回の例ではラッパー要素を3つ使用している。

<p class="codepen" data-height="450" data-theme-id="0" data-default-tab="css,result" data-user="takuyahara" data-slug-hash="EBeVOe" style="height: 450px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Flexbox">
  <span>See the Pen <a href="https://codepen.io/takuyahara/pen/EBeVOe/">
  Flexbox</a> by Takuya HARA (<a href="https://codepen.io/takuyahara">@takuyahara</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

**ブラウザ対応状況**
https://developer.mozilla.org/ja/docs/Web/CSS/flex#Browser_compatibility

## Grid Layout
要素を並べる方向を縦横の2次元で指定するため、ラッパー要素は1つだけで良い。テーブルレイアウトをCSSで実現したようなもので、直感的で分かりやすい。最新のプロパティであるためレガシーブラウザへの対応が課題か。

<p class="codepen" data-height="450" data-theme-id="0" data-default-tab="css,result" data-user="takuyahara" data-slug-hash="OeoMvj" style="height: 450px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Grid Layout">
  <span>See the Pen <a href="https://codepen.io/takuyahara/pen/OeoMvj/">
  Grid Layout</a> by Takuya HARA (<a href="https://codepen.io/takuyahara">@takuyahara</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

**ブラウザ対応状況**
https://developer.mozilla.org/ja/docs/Web/CSS/grid-template#Browser_compatibility

# おまけ
## Table Layout
かつて使われていたtableタグを用いたレイアウト。直感的でレガシーブラウザにも対応するが、セマンティクスの観点から推奨されない。

<p class="codepen" data-height="450" data-theme-id="0" data-default-tab="css,result" data-user="takuyahara" data-slug-hash="NZLPVB" style="height: 450px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Table Layout">
  <span>See the Pen <a href="https://codepen.io/takuyahara/pen/NZLPVB/">
  Table Layout</a> by Takuya HARA (<a href="https://codepen.io/takuyahara">@takuyahara</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>