富山のシステム開発・Web制作会社

FlexboxとCSS Gridの違いについて調べてみた

こんにちは。
CSSでレイアウトを組むときに、Flexboxが欠かせない存在になっている、satomiです。

現在は display:flex を使ってレイアウトを組むことが多いのですが、
グリッドレイアウトのサイトを調べていたとき display:grid を使っているサイトがあり
違いを調べてみました。

二つの違いについて

ソースコードはそれぞれ「1x」でスマホ、「0.5x」でPCサイトのレイアウトになります。

Flexbox(フレックスボックス)

・特定のレイアウトにするため、HTML構造上不要な親要素を作る必要がある。
・指定方法が単純明快なのでレイアウトを組みやすい。

.asideと.mainの親要素に.wrapがあります。
CSSは各所にマージンの指定などがあります。



CSS Grid Layout(CSSグリッドシステム)

・不要な要素を増やさずに、グリッドレイアウトが組める。
・サイズや余白など1箇所でまとめて指定できる。

.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レイアウトを取り入れていこうと思っている方もいらっしゃるのではないでしょうか。

私も少しずつ取り入れて行きたいと思います!以上です、日々勉強!

この記事を書いた人
宮野 聡美
Front-end Engineer

よく読まれている記事

FlexboxとCSS Gridの違いについて調べてみた

世界中で話題になっている中国のスーパー豪雨の状況を現地からお届けます!

MARBLEメンバー紹介&インタビュー!第二弾は関東からIターンしてくれた小野寺さん

MARBLEメンバー紹介&インタビュー!第一弾は当社の最高技術責任者 宮野さん

中国はすでに夏日!今年も活気付き屋台の最新情報!!

中国のGW、労働節とは!?

中国山東省にもセブンイレブンがオープン!気になるクオリティーは!?

みんな大好きSEOについて

はじめまして、中国ライターの赤石章太郎です!

CSSのanimationとkeyframeで画像をふわっと切り替える方法

関連記事

世界中で話題になっている中国のスーパー豪雨の状況を現地からお届けます!

MARBLEメンバー紹介&インタビュー!第二弾は関東からIターンしてくれた小野寺さん

MARBLEメンバー紹介&インタビュー!第一弾は当社の最高技術責任者 宮野さん