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;
}