グリッドレイアウトの基本 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