自分で試してみる »
子要素(アイテム)
グリッド*コンテナ*にはグリッド*アイテム*が含まれます。
デフォルトでは、コンテナーには各列、各行に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-areaプロパティは、grid-row-start、grid-column-start、grid-row-end、grid-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コードの最初のアイテムは、グリッドの最初のアイテムとして表示される必要はありません。
例
.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; }
}
自分で試してみる »
