CSS
CSS3
grid

display:grid;の概要

More than 1 year has passed since last update.

最近ちらほら目にするgrid layoutについて調べたので簡単にまとめ。

実際の使い方については別の投稿で書こうと思います。

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


gridとは

flexboxtable同様にマルチカラムレイアウトすることができるプロパティ。

flexbox一次元的なレイアウトなのに対して、grid二次元的なレイアウトが可能。


gridの概要

定義
概要

グリッドコンテナ

display:grid;を指定された要素。

グリッドアイテム

display:grid;を指定された要素の直下の子要素。
孫要素はグリッドアイテムとみなされない。

グリッドトラック

gridcolumn(列)row(行)の総称。
htmltableタグをイメージしてもらうとわかりやすいです。

グリッドライン
グリッドトラック間の線。

グリッドセル
グリッドラインによって分けられた個々のスペース。

グリッドエリア
複数のセルをまとめたグリッド内の特定の領域。


gridのプロパティ


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

プロパティ
概要

grid
要素をグリッドコンテナとして定義する。

grid-template-columns
グリッドトラック(列)のサイズを指定する。

grid-template-rows
グリッドトラック(行)のサイズを指定する。

grid-template-areas
グリッドエリアの名前を参照して、グリッドテンプレートを定義する。

grid-template

grid-template-columnsgrid-template-rowsgrid-template-areasを指定できるショートハンド。

grid-column-gap
グリッドトラック(列)の間を指定する。

grid-row-gap
グリッドトラック(行)の間を指定する。

grid-gap

grid-column-gapgrid-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-startgrid-column-endを指定できるショートハンド。

grid-row

grid-row-startgrid-row-endを指定できるショートハンド。

grid-area
グリッドセルに名前を付けてgrid-template-areasプロパティで参照できるようにする。
grid-columngrid-rowのショートハンドでもある。

justify-self
グリッドアイテム内のコンテンツを行方向に整列する。

align-self
グリッドアイテム内のコンテンツを列方向に整列する。

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

Can I Use CSS Grid Layout

グリッドレイアウトでレスポンシブ対応

Media Queryを使わずCSS grid Layoutをレスポンシブ対応