CSSグリッドエリアプロパティ
例
「item1」を行2列1から開始し、2行3列にまたがるようにします。
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
このgrid-area
プロパティは、グリッドレイアウトでのグリッドアイテムのサイズと位置を指定し、次のプロパティの省略形のプロパティです。
このgrid-area
プロパティを使用して、グリッドアイテムに名前を割り当てることもできます。名前付きグリッドアイテムは、グリッドコンテナのgrid-template-areasプロパティから参照できます
。以下の例を参照してください。
デフォルト値: | 車/車/車/車 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSSグリッドレイアウトモジュールレベル1 |
JavaScript構文: | object .style.gridArea = "1/2 /スパン2 /スパン3" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
grid-area | 57 | 16 | 52 | 10 | 44 |
CSS構文
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname;
プロパティ値
Value | Description |
---|---|
grid-row-start | Specifies on which row to start displaying the item. |
grid-column-start | Specifies on which column to start displaying the item. |
grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
itemname | Specifies a name for the grid item |
その他の例
例
Item1は「myArea」という名前を取得し、5列のグリッドレイアウトで5列すべてにまたがっています。
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
例
「myArea」を5列のグリッドレイアウトの2列にまたがらせます(ピリオド記号は名前のないアイテムを表します)。
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
例
「item1」を2列2行にまたがるようにします。
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea
myArea . . .';
}
例
すべてのアイテムに名前を付け、すぐに使用できるWebページテンプレートを作成します。
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
関連ページ
CSSチュートリアル:CSSグリッドレイアウト