Spanning Rows & Columns
Grid items can span across multiple tracks in either direction. This is how you create complex, magazine-style layouts where some items are larger than others.
1. Column Spanning
Make an item span multiple columns. The item occupies multiple column tracks while other items flow around it.
.header { grid-column: span 3; } /* full width */
.wide { grid-column: span 2; } /* 2 of 3 cols */
.normal { /* no span — just 1 column */ }2. Row Spanning
Make an item taller by spanning multiple rows. This is the key technique for creating sidebar layouts and featured image cards.
.container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 70px; /* consistent row heights */
}
.tall-3 { grid-row: span 3; }
.tall-2 { grid-row: span 2; }3. Spanning Both Axes
An item can span multiple columns AND multiple rows simultaneously, creating a larger grid cell. This is perfect for featured content areas.
.featured {
grid-column: span 2; /* 2 columns wide */
grid-row: span 2; /* 2 rows tall */
}
/* creates a 2×2 cell in the grid */4. Magazine-Style Layout
Combining column and row spanning creates rich editorial layouts. Use explicit placement + spanning together.
cols 1-3, rows 1-3
.container {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 80px 80px 80px;
}
.hero { grid-column: 1 / 3; grid-row: 1 / 3; }
.wide { grid-column: 3 / 5; grid-row: 2; }5. Pinterest-Style Variable Heights
CSS Grid doesn't natively support masonry layout (random heights filling gaps), but you can approximate it with row spans. True masonry requires JavaScript or the CSS masonry spec (in development).
.container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 40px; /* base unit */
grid-auto-flow: dense; /* fill gaps (see Dense topic) */
}
.tall { grid-row: span 3; }
.medium { grid-row: span 2; }
.short { grid-row: span 1; }