Spanning Rows & Columns
Make items cover multiple grid tracks.
Syntax
grid-column: span 2; grid-row: 1 / 3;Grid items can span several columns or rows using grid-column and grid-row.
grid-column: 1 / 3— from line 1 to line 3 (two columns).grid-column: span 2— span two columns from the current position.
Example
Loading editor…
Press Run to see the result.
When to use it
- A designer makes a hero image span all three columns of a magazine grid while article thumbnails each occupy one column.
- A developer uses grid-row: span 2 on a featured article card so it occupies twice the vertical space of regular cards.
- A developer uses grid-column: 1 / -1 on a full-width banner so it always spans every column regardless of how many columns the grid has.
More examples
Column span for featured item
Makes the featured card span two of three columns using grid-column: span 2 while normal items occupy one column each.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.featured {
grid-column: span 2;
background: #eef3ff;
}Row and column spanning together
Positions a hero card across a 2x2 area using explicit line numbers for both column and row spans.
.hero-card {
grid-column: 1 / 3;
grid-row: 1 / 3;
/* spans 2 columns and 2 rows */
}
.small-card {
/* defaults to 1 column x 1 row */
}Full-width row with -1 shorthand
Uses 1 / -1 as a shorthand to span from the first to the last grid line, regardless of the column count.
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.banner {
grid-column: 1 / -1; /* always spans all columns */
background: #2965f1;
color: #fff;
padding: 24px;
text-align: center;
}
Discussion