1
Grid Rows: Horizontal tracks in a grid. Defined using the grid-template-rows property.
2
Grid Columns: Vertical tracks in a grid. Defined using the grid-template-columns property.
3
Values: You can define rows and columns using lengths (px, em), percentages (%), fractions (fr), or auto.
4
Example: grid-template-columns: 1fr 2fr 1fr; creates three columns with the middle column twice as wide as the others.
5
Example: grid-template-rows: 100px auto 50px; creates three rows with fixed, auto, and fixed heights.

Example: Defining Rows and Columns

Difficulty: 5/10

Topics: grid-template-rows, grid-template-columns, responsive layout

0-2 years experience

1
We need a simple two‑column layout where the left column is 200px wide and the right column takes the remaining space. How would you define the grid rows and columns in CSS to achieve that?
2
If you set grid-template-columns: 1fr 2fr; on a container with three child items, what happens to the third item and why?
3
You have a grid with grid-template-rows: 100px auto;. What height will the second row have if its content is 300px tall?

2-5 years experience

1
You’re building a dashboard where widgets can be added dynamically. After a new widget is inserted, the layout breaks and items overlap. Walk me through how you’d debug the grid rows/columns definitions.
2
Explain why changing grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); caused some cards to shrink unexpectedly on a page that also uses grid-auto-rows: 150px;.
3
A media query switches the grid from a 4‑column layout to a 2‑column layout, but the rows don’t collapse as expected, leaving large empty gaps. How would you adjust the grid definitions to fix this?

5-8 years experience

1
Our design system defines a 12‑column CSS grid that must work across desktop, tablet, and mobile. Describe how you’d structure the grid rows and columns, including fallback strategies, to keep the layout performant and maintainable.
2
We need to support both left‑to‑right and right‑to‑left languages in a complex form built with CSS Grid. How would you define rows and columns so that the layout mirrors correctly without duplicating CSS?
3
During a performance audit we noticed re‑flows when the grid container’s height changes due to async data loading. What grid‑row/column techniques can reduce layout thrashing at scale?

8+ years experience

1
Our company is migrating a legacy UI built with floats to CSS Grid. The legacy codebase has dozens of nested grid containers with hard‑coded row/column sizes. Outline a migration plan that minimizes risk and ensures cross‑team consistency.
2
We are designing a shared component library that will be used by multiple product teams, each with different breakpoints. How would you define grid rows and columns in a way that allows teams to extend the layout without breaking existing components?
3
Explain the trade‑offs between using explicit grid-template-rows/columns versus implicit grid placement for a large, data‑driven dashboard that can render thousands of cells. Which approach scales better and why?

❓What are the pros and cons of using `fr` units versus fixed pixel values?
❓How does the implicit grid behave when you place an item outside the defined tracks?
❓Can you describe how you’d test the responsiveness of your grid across devices?