More than 5 years have passed since last update.

display:grid;の概要

Last updated at 2017-12-01Posted at 2017-04-11

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

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

gridとは

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

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

プロパティ	概要
`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に対応してます。