What is CSS Grid, and why is it used?

0-2 years experience

1. 1We need a simple two‑column layout where the sidebar is 250px wide and the main content fills the remaining space. How would you achieve that using CSS Grid?
2. 2If you set `grid-template-columns: 1fr 2fr;` on a container with three child items, what layout do you expect and why?
3. 3You have a grid with `grid-template-rows: repeat(2, 100px);` and you add a fourth item. Where does it end up in the grid?

2-5 years experience

1. 1Our product page uses a CSS Grid to arrange product cards. When we add a new card, the layout breaks on mobile. Walk me through how you'd debug the issue.
2. 2We want the header to span the full width while the main area uses a 3‑column grid that collapses to a single column at 600px. How would you implement that, and what trade‑offs do you consider?
3. 3Explain why enabling `grid-auto-flow: dense;` might cause items to appear out of source order, and when you would choose to use it.

5-8 years experience

1. 1Our dashboard component is built with nested CSS Grids, and we notice performance lag during window resize. How would you investigate and improve the rendering performance?
2. 2We need to support a legacy codebase that uses floats for layout, but we want to migrate to CSS Grid gradually. Describe a strategy to refactor components without breaking existing pages.
3. 3When designing a responsive email template, what limitations of CSS Grid do you need to account for, and how would you provide graceful fallbacks?

8+ years experience

1. 1Our organization is planning a UI redesign across dozens of micro‑frontends. How would you standardize the use of CSS Grid in a design system to ensure consistency, theming, and maintainability?
2. 2Consider a large e‑commerce site with thousands of product pages, each using custom grid layouts. What architectural decisions would you make to enable a centralized grid configuration and reduce CSS duplication?
3. 3How would you evaluate the trade‑offs of adopting CSS Grid versus a component library's layout system when scaling to multiple teams and platforms?