display:grid;の概要

最近ちらほら目にするgrid layoutについて調べたので簡単にまとめ。
実際の使い方については別の投稿で書こうと思います。

display:grid;はマジで複雑なので先に概要を理解することをおすすめします。

gridとは

flexbox、table同様にマルチカラムレイアウトすることができるプロパティ。
flexboxが一次元的なレイアウトなのに対して、gridは二次元的なレイアウトが可能。

gridの概要

定義	概要
グリッドコンテナ	display:grid;を指定された要素。
グリッドアイテム	display:grid;を指定された要素の直下の子要素。 孫要素はグリッドアイテムとみなされない。
グリッドトラック	gridのcolumn（列）とrow（行）の総称。 htmlのtableタグをイメージしてもらうとわかりやすいです。
グリッドライン	グリッドトラック間の線。
グリッドセル	グリッドラインによって分けられた個々のスペース。
グリッドエリア	複数のセルをまとめたグリッド内の特定の領域。

gridのプロパティ

グリッドコンテナのプロパティ

プロパティ	概要
grid	要素をグリッドコンテナとして定義する。
grid-template-columns	グリッドトラック（列）のサイズを指定する。
grid-template-rows	グリッドトラック（行）のサイズを指定する。
grid-template-areas	グリッドエリアの名前を参照して、グリッドテンプレートを定義する。
grid-template	grid-template-columns、grid-template-rows、grid-template-areasを指定できるショートハンド。
grid-column-gap	グリッドトラック（列）の間を指定する。
grid-row-gap	グリッドトラック（行）の間を指定する。
grid-gap	grid-column-gap、grid-row-gapを指定できるショートハンド。
justify-items	グリッドアイテムの行方向の整列。
align-items	グリッドアイテムの列方向の整列。
justify-content	グリッドトラックの行方向の整列。
align-content	グリッドトラックの列方向の整列。
grid-auto-columns	自動的に生成されたグリッドトラックのサイズを指定する。
grid-auto-rows	自動的に生成されたグリッドトラックのサイズを指定する。
grid-auto-flow	明示的に配置されていないグリッドアイテムの配置を指定する。

グリッドアイテムのプロパティ

プロパティ	概要
grid-column-start	グリッドアイテム（列）の開始位置を指定する。
grid-column-end	グリッドアイテム（列）の終了位置を指定する。
grid-row-start	グリッドアイテム（行）の開始位置を指定する。
grid-row-end	グリッドアイテム（行）の終了位置を指定する。
grid-column	grid-column-start、grid-column-endを指定できるショートハンド。
grid-row	grid-row-start、grid-row-endを指定できるショートハンド。
grid-area	グリッドセルに名前を付けてgrid-template-areasプロパティで参照できるようにする。 grid-column、grid-rowのショートハンドでもある。
justify-self	グリッドアイテム内のコンテンツを行方向に整列する。
align-self	グリッドアイテム内のコンテンツを列方向に整列する。

2017年4月現在、Android以外はgridに対応してます。

Can I Use CSS Grid Layout

グリッドレイアウトでレスポンシブ対応
Media Queryを使わずCSS grid Layoutをレスポンシブ対応