グリッドレイアウトの基本 Grid Layout

グリッドレイアウトとは

CSSのグリッドは線(ライン)、セル、トラック、領域(エリア)の4つの仕様で構成されています。

グリッドライン(Grid Lines)

グリッドを構成する水平または垂直の線です。

グリッドセル(Grid Cell)

4方向のグリッドラインで囲まれた間のスペースです。

※ c = column、r = row

グリッドトラック(Grid Track)

水平または垂直のいずれかのセルの範囲を示します。

グリッドエリア(Grid Area)

グリッドラインによって結合されたセルです。

対応ブラウザ

IEおよびEdgeでベンダープレフィックスを付けた一部のプロパティのみ対応しています。

  バージョン
Firefox 46
Chrome 50
IE 10~(-ms-)
Edge 13~(-ms-)

要素をグリッドレイアウトにするには

要素をグリッドレイアウトにするには、displayプロパティの値をgrid(インラインとするならinline-grid)にすることで、グリッドの要素として適用されます。

【HTML】

【CSS】

CSS

CSS3逆引きリファレンス一覧へ戻る