How do you span an item across multiple columns or rows?

0-2 years experience

1. 1You'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. 2If you set grid-column: 1 / 4 on an item but the grid only has three columns defined, what happens?
3. 3You 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. 1A 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. 2A 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. 3We 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. 1You'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. 2A 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. 3In 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. 1Our 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. 2We’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. 3How would you design a grid system that supports cross-team component reuse with variable spans while maintaining accessibility, performance, and internationalization support?