CSSグリッドレイアウト:スパンキーワード
grid-columnまたはgrid-rowを使用してアイテムを親グリッドに配置する場合は、 span キーワードを使用して、アイテムのときに終了行を指定しないようにすることができます。複数の列または行にまたがる必要があります。
3列と2行にまたがるグリッドアイテムの次のCSSルールがあるとします。
.item {
grid-column: 2 / 5;
grid-row: 1 / 3;
}
代わりに、spanキーワードを次のように使用できます。
.item {
grid-column: 2 / span 3;
grid-row: 1 / span 2;
}
代わりに、終了線を指定してスパンを開始線として使用できます。この場合、スパンは逆に機能するため、以下も同等です。
.item {
grid-column: span 3 / 5;
grid-row: span 2 / 3;
}
複数の行が同じ名前の場合、次の例のように開始行と終了行を定義できます。
.item {
grid-column: col 2 / col 7;
grid-row: content 6 / content 10;
}
アイテムは、 col という名前の2行目で始まり、colという名前の7行目で終わります。 同様に、 row という名前の6行目で始まり、rowという名前の10行目で終わります。
ここで、 span キーワードも役立ちます。これは、同等です。
.item {
grid-column: col 2 / span col 5;
grid-row: content 6 / span content 4;
}
Span は、grid-areaプロパティと一緒に使用することもできます。 たとえば、アイテムを自動的に配置するが、指定された数の行と列にまたがる場合は、次のようになります。
.item {
grid-area: span 6 / span 4;
}