CSS Grid organizes content using a system of rows and columns. To understand its structure, it's important to know about grid tracks, grid lines, and grid cells.

Key Concepts

1
Grid Tracks: These are the rows or columns in a grid. Each row or column is considered a track.
2
Grid Lines: These are the dividing lines that separate grid tracks. They are numbered starting from 1 at the top-left corner (for rows and columns).
3
Grid Cells: The smallest unit of a grid, formed by the intersection of a row track and a column track. A single grid cell is the space between four grid lines.

Example: Visualizing Grid Tracks, Lines, and Cells

Difficulty: 5/10

Topics: grid tracks, grid lines, grid cells

Scenario Questions

0-2 years experience

1
You 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
If 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
What happens if you declare grid-template-rows: 100px; but you have three rows of content without specifying row placements?

2-5 years experience

1
Your 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
We 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
Explain 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
Our 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
When 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
We 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
The 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
Our 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
Discuss the long‑term maintenance implications of using explicit line numbers versus named grid areas in a large codebase, especially as components evolve over time.

Follow-up Questions

❓Can you show the exact CSS you’d write for that scenario?
❓What edge cases or browser quirks would you verify after implementing it?
❓How would you document the grid conventions for other developers on the team?