レイアウト

IE11のみが微妙になっている。

IE11が微妙。ごく一部のブラウザが使用不能になっている。(無視できるレベル)

どう使い分けるか?

Flexbox は一次元に並べる。折り返しあり。

ただし折り返し時に幅を共通化しようと考えると Grid レイアウトにするしかない。

Grid は二次元で並べる。

table は表型データを入れる時に使う。(表型データに Grid レイアウトを使うべきではない。)

div の入れ子ではどうして問題なのか?

例えば、div の上下分割 + その入れ子で左右分割として4つに分けた場合、分離枠のドラッグが上の枠と下の枠で分かれてしまう。十字に分ける場合には、これは期待通りの動きではない。

静的なページでは問題にならないが、動的に編集できる場合には問題となる。

これを解決するには Grid 型にするしかない。

なぜ Grid レイアウトを使うのか?

そもそも HTML はフロー型(流し込み型)のレイアウトシステムになっていて、文書がフローというレイアウト情報を持ってしまっている。

このために、CSS だけで自由なレイアウトを作ることが根本的に不可能になっていた。

コンテンツ部分がフローになるのは仕方ないが、ブロックまでフローの影響を受けてしまっていた。

レスポンシブデザインでも、フローの考え方はそのまま流用されていた。

これを根本的に解決できるのは Grid のみである。

Grid ではどのブロックをどこに配置するかを自由に決められるので、文書内でのブロックの出現順に依らない。(これがとても大きい)

table の rowspan, colspan という邪悪な設定ではなく、純粋な行列上のラベル付けで決定されるので、ズレも起こりにくい。

レイアウトで考えること

少なくとも表示したいものがすべて用意されていること。

表示したい物のグルーピングを正しくすること。

大まかなレイアウトから出力順を考えること。(HTML がフロー型レイアウトを取っているため避けようがない)