Grid Layoutとは

CSS3で策定が進められている、Flexboxに次ぐ新たなレイアウトモジュール。
画面を縦横の格子状に分割して要素を自由に配置出来るため、従来に比べて複雑なレイアウトを容易に表現出来る。

格子状にレイアウト出来るため、縦横に整列されたページを作ることに適している。（逆に言えば、縦か横どちらかが揃っていないようなページの場合は適用するメリットは少ない）。
またMediaQueryと合わせて使用することで、画面サイズに合わせてレイアウトを変更することも出来るため、レスポンシブデザインのWebページにも適している。

対応ブラウザ

http://caniuse.com/#feat=css-grid
ChromeとかFirefoxとかSafariなんかの主要ブラウザの最新バージョンではサポートしてるっぽい（2017/04/06時点）
IE？Edge？知らない子ですね。

概要

Flexboxでは、図の左側のように、画面のレイアウトを作る時は 横に分割してから更に縦に分割 のような方法で作成していた。

対して、Grid Layoutでは、図の右側のように、 格子状に画面を分割して、それぞれの要素をどのように配置するか決める といった方法でレイアウトを作成する。

各要素は分割した各ブロックを組み合わせた長方形でレイアウトする。

レスポンシブに対応する場合、画面サイズに応じて各要素の配置を変更することで対応可能。

参考：https://drafts.csswg.org/css-grid/#source-independence

次回：使い方（Grid Layoutの用語と基本）