Table of Contents
If you're placing items onto their parent grid with <^>grid-column<^> or <^>grid-row<^>, you can use the <^>span<^> keyword to avoid specifying end lines when items should span more than one column or row.
Given the following CSS rule for a grid item, which spans 3 columns and 2 rows:
.item {
grid-column: 2 / 5;
grid-row: 1 / 3;
}
We can use the <^>span<^> keyword like this instead:
.item {
grid-column: 2 / span 3;
grid-row: 1 / span 2;
}
The end line can be provided and span used as the start line instead, in which case the span acts in reverse, so the following is also equivalent:
.item {
grid-column: span 3 / 5;
grid-row: span 2 / 3;
}
If multiple lines have the same name, you can define the start and end lines like in the following example:
.item {
grid-column: col 2 / col 7;
grid-row: content 6 / content 10;
}
The item starts on the column with the 2nd line named <^>col<^> and ends on the 7th line also named <^>col<^>. Similarly, it starts on the 6th line named <^>row<^> and ends on the 10th line named <^>row<^>.
And here the <^>span<^> keyword can help also, and the following is equivalent:
.item {
grid-column: col 2 / span col 5;
grid-row: content 6 / span content 4;
}
—
<^>Span<^> can also be used with the <^>grid-area<^> property. For example, if we want an item to be placed automatically, but to span across a provided number of rows and columns:
.item {
grid-area: span 6 / span 4;
}
