こんちは～Light Web社員の2号（ニゴウ）です。
今日からLight TALK Plus＋を月1回更新していきます！

「Light TALK Plus＋」とは…
社員2号が気になった今ホットなWEBニュースやティップスをお届けするコーナーです。

今回のテーマはこちら！

「FlexboxとCSS Grid」

みなさんはwebページのレイアウトを組む時、何を使うことが多いですか？
弊社ではレイアウトを組む上で最近の主流といえるFlexboxを使うことが多いです。

Flexboxの基礎が分かる記事⇒
css3のFlexboxを基本から理解して、使い倒そう！

Flexboxは頭を悩ませがちなレスポンシブデザインとの親和性も高く、非常に便利です。

また、Flexboxの次の段階をいくというCSS Gridも今年になって実用段階に来たといえます。

CSS Gridの基礎が分かる記事⇒
CSS Grid Layout を極める！（基礎編）

CSS GridとFlexboxの大きな違いは、配置の次元の差にあるといわれています。
Flexboxが一方向から要素を積んでいくのに対し、CSS Gridは縦横自由に要素を配置できます！

じゃあ、Flexboxいらなくね？と思われる方もいるかもしれませんが、何事にも向き不向きというものがあるわけで…
どちらも使いこなすことができれば、効率よくレイアウトを組むことができるのです！
具体的にいえば、Flexboxは水平軸か垂直軸どちらかに沿ったレイアウトで、CSS Gridは斜めや市松柄のようにポコポコ抜けのあるような複雑なレイアウトで真価を発揮します。

CSS Gridは主要なブラウザでサポートされるまで6年もかかっています。（まだFlexboxほどの知名度がないのはそのためです）
が、今はすべてのメジャーブラウザでサポートされているため、安心して使用できる段階にあります。
非常に便利なCSSなのでまだ使ったことのない方は是非使ってみてください！