In CSS Grid, you can make an item span multiple columns or rows using the grid-column and grid-row properties. These properties define how many grid tracks (columns or rows) an item should stretch across.

Key Points

1
Use grid-column: start / end; to define which columns an item spans across.
2
Use grid-row: start / end; to define which rows an item spans across.
3
You can also use the span keyword to specify how many tracks the item should cover (e.g., grid-column: span 2;).
4
Grid lines are numbered starting from 1, and you can mix numbers and the span keyword for flexible positioning.

Example: Spanning Columns and Rows

Difficulty: 3/10

Topics: grid-template-areas, grid-column, grid-row

Scenario Questions

0-2 years experience

1
You're building a product card grid where the featured item needs to span two columns — how would you write the CSS to make that happen?
2
If you set grid-column: 1 / 4 on an item but the grid only has three columns defined, what happens?
3
You tried to span an item across three rows using grid-row: span 3, but it’s cutting off — what’s the most likely cause?

2-5 years experience

1
A dashboard layout breaks when the screen resizes — one card is spanning four columns on desktop but overlaps content on tablet. How would you fix this?
2
A teammate used grid-template-areas to span items, but now adding a new section breaks the layout. Why might that happen, and how would you refactor it?
3
We have a responsive grid where mobile shows one column, but desktop shows a 4-column layout. How do you ensure a banner spans the full width on desktop without breaking mobile?

5-8 years experience

1
You're designing a dynamic content grid where users can drag and resize widgets — how do you handle spanning logic in code without causing layout thrashing or performance issues?
2
A legacy component uses absolute positioning for multi-column layouts. You want to migrate to CSS Grid with spans — what edge cases should you test, and how do you ensure backward compatibility?
3
In a CMS-driven layout, content editors can choose to make a block span 2 or 3 columns. How do you architect the CSS and component API to support this safely without exposing layout fragility?

8+ years experience

1
Our design system has 12+ components that use grid spans inconsistently — how do you standardize this across teams without breaking existing layouts or creating technical debt?
2
We’re migrating from a float-based layout to CSS Grid with dynamic spans in a 10-year-old enterprise app. What’s your strategy for phased rollout, fallbacks, and monitoring regressions?
3
How would you design a grid system that supports cross-team component reuse with variable spans while maintaining accessibility, performance, and internationalization support?

Follow-up Questions

❓What happens if two grid items span into the same cell?
❓How would you debug a layout where an item isn't spanning as expected?
❓Can you span across columns that haven't been explicitly defined?