Column span
How many tracks a grid item stretches across, such as a featured card occupying eight columns in a 12-column grid.
See it
What it is
Column span is the number of grid columns an element occupies. In a 12-column grid, one card might span four columns while a featured card spans eight. Changing the span creates size hierarchy without inventing a second grid.
Reach for it when items need different emphasis but should still align to shared tracks. In CSS Grid, grid-column: span 6 tells an item to cover six column tracks from its auto-placed starting point.
Gotcha: spans only make sense relative to the current grid. A span chosen for 12 tracks can create awkward placement when a breakpoint reduces the grid, so reset it with the column count. Also, the CSS column-span property belongs to flowing multi-column text and is a different tool.
Ask AI for it
Create a 12-column CSS Grid and set the featured item to grid-column: span 8, the supporting item to span 4, and standard cards to span 3. Use repeat(12, minmax(0, 1fr)) for grid-template-columns, keep a consistent gap, reset the spans for a 6-column tablet grid, and make every item span the full grid on mobile.