What does the grid-template-rows property do?

0-2 years experience

1. 1We need a simple card component where the image should always be 150px tall and the text below should fill the remaining space. How would you use grid-template-rows to achieve that?
2. 2If a container has grid-template-rows: 100px auto; and three rows of content, what heights will the rows have when the middle row's content exceeds 200px?
3. 3Write the CSS to create a two‑row layout where the first row occupies 30% of the viewport height and the second row takes the rest, using grid-template-rows.

2-5 years experience

1. 1After adding a new promotional banner, the second row of our product page collapsed. The grid uses grid-template-rows: min-content 1fr. Why did this happen and how would you fix it?
2. 2We want a dashboard with three rows sized 200px, 1fr, and 2fr on desktop, but equal heights on mobile. How would you implement that using grid-template-rows and media queries?
3. 3A teammate changed grid-template-rows to repeat(2, 1fr) and now the header row shrinks unexpectedly. What could cause that and how would you debug the issue?

5-8 years experience

1. 1Design a reusable Grid component for a data table that supports variable row heights, optional fixed header/footer rows, and can handle thousands of rows efficiently. Discuss your grid-template-rows strategy and any performance considerations.
2. 2Our legacy UI mixes Flexbox and Grid. We need to refactor a complex form layout to use Grid exclusively while supporting dynamic field groups. How would you structure grid-template-rows to keep the CSS maintainable?
3. 3When implementing virtual scrolling inside a grid container, how does choosing fixed versus flexible values in grid-template-rows affect scroll calculations and rendering performance?

8+ years experience

1. 1Our organization is migrating to a design system that relies heavily on CSS Grid. What guidelines would you establish for using grid-template-rows across teams to ensure consistency, theming, and future scalability?
2. 2Many micro‑frontends currently hard‑code pixel values in grid-template-rows, causing breakage on new devices. Propose an architectural strategy—using CSS variables, design tokens, etc.—to standardize row sizing and describe how you’d roll it out.
3. 3During a cross‑team redesign we need to support both LTR and RTL languages while using grid-template-rows for vertical spacing. What patterns and considerations would you adopt to avoid duplication and maintain accessibility?