CSS Grid Layoutの魅力はシンプルなソースコード!?

CSS Grid Layoutとは

格子状のグリッドに、アイテムを配置していく新しいhtml/cssのレイアウト手法。
新しいcssです。

新しいから、モダンブラウザでもやっとこサポート状態(2017.6時点)なので、
規模の大きい案件、サポートを広く持ちたい案件では使いづらいのですが……

覚えれば、シンプルコードで複雑なレイアウトが一発。

デモ


こんなレイアウトも。

htmlは全体のwrap以外は必要な要素だけで。

css(scss)もたったこれだけ

デモ2

この書き方なら、ページ全体のレイアウトを、gridで構築するのも簡単!

使いどころ

レイアウトされる感覚でいえば、tableを使いたくなるような入り組んだレイアウト向き。

Flexboxもfloatで配置するのと比べれば柔軟な動かし方ができますが、
縦方向横方向自在にアイテムを配置していくならgrid layoutでしょうか……。

実際にはもっといろいろな置き方ができるので、下記の丁寧解説を参考に実際に置いてみるのが良い感じ。

CSS Grid Layout を極める!(基礎編)
CSS Grid Layout を極める!(場面別編)