FlexboxとCSS Gridの違いについて調べてみた
こんにちは。
CSSでレイアウトを組むときに、Flexboxが欠かせない存在になっている、satomiです。
現在は display:flex を使ってレイアウトを組むことが多いのですが、
グリッドレイアウトのサイトを調べていたとき display:grid を使っているサイトがあり
違いを調べてみました。
二つの違いについて
ソースコードはそれぞれ「1x」でスマホ、「0.5x」でPCサイトのレイアウトになります。
Flexbox（フレックスボックス）
・特定のレイアウトにするため、HTML構造上不要な親要素を作る必要がある。
・指定方法が単純明快なのでレイアウトを組みやすい。
.asideと.mainの親要素に.wrapがあります。
CSSは各所にマージンの指定などがあります。
CSS Grid Layout（CSSグリッドシステム）
・不要な要素を増やさずに、グリッドレイアウトが組める。
・サイズや余白など１箇所でまとめて指定できる。
.wrapがなくなり、HTMLがシンプルになりました。
また、CSSも設定が一箇所にまとまり見やすくなっていると思います。
「CSS Grid Layout」のお役立ちサイト
https://grid.layoutit.com/
https://griddy.io/
まとめ
2021年9月時点でCSS Grid LayoutはIE11もベンダープレフィックスを使って対応する形となっているようです。Can I use参照
IE11のサポートも2022年6月15日に終了するようなので、
CSS Gridレイアウトを取り入れていこうと思っている方もいらっしゃるのではないでしょうか。
私も少しずつ取り入れて行きたいと思います！以上です、日々勉強！
