CSSグリッドアイテム
1
2
3
4
5
子要素（アイテム）
グリッドコンテナにはグリッドアイテムが含まれています。
デフォルトでは、コンテナには各行の各列に1つのグリッドアイテムがありますが、複数の列や行にまたがるようにグリッドアイテムのスタイルを設定できます。
grid-columnプロパティ：
grid-columnプロパティは、アイテムを配置する列を定義します。
アイテムの開始位置と終了位置を定義します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
注：このgrid-columnプロパティは、grid-column-startおよびプロパティの省略形のプロパティgrid-column-endです。
アイテムを配置するには、行番号を参照するか、キーワード「span」を使用して、アイテムがまたがる列の数を定義します。
例
「item1」を列1で開始し、列5の前で終了させます。
.item1 {
grid-column: 1 / 5;
}
例
「item1」を列1から開始し、3列にまたがるようにします。
.item1 {
grid-column: 1 / span 3;
}
例
「item2」を列2から開始し、列3にまたがるようにします。
.item2 {
grid-column: 2 / span 3;
}
grid-rowプロパティ：
grid-rowプロパティは、アイテムを配置する行を定義します。
アイテムの開始位置と終了位置を定義します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
注：このgrid-rowプロパティは、grid-row-startおよびプロパティの省略形のプロパティgrid-row-endです。
アイテムを配置するには、行番号を参照するか、キーワード「span」を使用して、アイテムがまたがる行数を定義します。
例
「item1」を行1行目で開始し、行行4で終了するようにします。
.item1 {
grid-row: 1 / 4;
}
例
「item1」を1行目から開始し、2行にまたがるようにします。
.item1 {
grid-row: 1 / span 2;
}
グリッドエリアプロパティ
このgrid-areaプロパティは、、、およびプロパティの省略形プロパティとして
grid-row-start使用できgrid-column-startます。grid-row-endgrid-column-end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
例
「item8」を行1行目と列行2で開始し、行5行目と列6行目で終了します。
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
例
「item8」を行2行目と列行1から開始し、2行3列にまたがるようにします。
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
グリッドアイテムの命名
このgrid-areaプロパティを使用して、グリッドアイテムに名前を割り当てることもできます。
ヘッダ
メニュー
主要
右
フッター
grid-template-areas名前付きグリッドアイテムは、グリッドコンテナのプロパティで参照できます。
例
Item1は「myArea」という名前を取得し、5列のグリッドレイアウトの5列すべてにまたがっています。
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
各行はアポストロフィ（ ''）で定義されます
各行の列は、スペースで区切られたアポストロフィの内側で定義されます。
注：ピリオド記号は、名前のないグリッド項目を表します。
例
「myArea」を5列のグリッドレイアウトの2列にまたがらせます（ピリオド記号は名前のないアイテムを表します）。
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
2つの行を定義するには、別のアポストロフィのセット内に2番目の行の列を定義します。
例
「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';
}
アイテムの順序
グリッドレイアウトを使用すると、アイテムを好きな場所に配置できます。
HTMLコードの最初の項目は、グリッドの最初の項目として表示される必要はありません。
1
2
3
4
5
6
例
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
メディアクエリを使用して、特定の画面サイズの順序を再配置できます。
例
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}