What are grid tracks, grid lines, and grid cells?

0-2 years experience

1. 1You need a simple two‑column layout where the left column is 200 px wide and the right column fills the remaining space. How would you define the grid tracks and place the content using grid lines?
2. 2If you set `grid-template-columns: 1fr 2fr;` and then place an item with `grid-column: 2 / 3`, which grid cell does it occupy and why?
3. 3What happens if you declare `grid-template-rows: 100px;` but you have three rows of content without specifying row placements?

2-5 years experience

1. 1Your team built a dashboard with CSS grid, but a new widget sometimes overlaps another when the viewport shrinks. Walk me through how you’d diagnose whether the problem is with tracks, lines, or cell placement.
2. 2We tried to create a responsive gallery where each row should have three equal columns, yet on some browsers the items wrap unexpectedly. How would you adjust the grid lines or track sizing to fix it?
3. 3Explain why adding `grid-auto-flow: dense;` caused items to shift into unexpected cells, and how you’d control that behavior.

5-8 years experience

1. 1Our design system defines reusable grid components. How would you structure the CSS—using named grid lines, implicit tracks, etc.—so developers can reliably place items into specific cells without hard‑coding line numbers?
2. 2When rendering a large data table with thousands of rows using CSS grid, what performance concerns arise from implicit tracks, and how would you mitigate them?
3. 3We need to support both LTR and RTL languages in a grid layout. How would you use grid line naming or placement to ensure cells mirror correctly without rewriting each component?

8+ years experience

1. 1The company is migrating a legacy UI built with floats and flexbox to a CSS‑grid‑based layout across dozens of micro‑frontends. What migration strategy would you propose for introducing grid tracks, lines, and cells while minimizing breakage and coordinating across teams?
2. 2Our design system wants to expose a themable grid API where product teams can define custom track sizes at runtime. How would you design the CSS (variables, named lines) and tooling to make this scalable and maintainable?
3. 3Discuss the long‑term maintenance implications of using explicit line numbers versus named grid areas in a large codebase, especially as components evolve over time.