What does the grid-template-columns property do?

0-2 years experience

1. 1We need a simple two‑column layout where the left column is 200 px wide and the right column takes the remaining space. How would you write the CSS using grid-template-columns?
2. 2If you set grid-template-columns: 1fr 2fr; what widths will the columns have when the container is 900 px wide?
3. 3You have a container with grid-template-columns: repeat(3, 100px); but you need the third column to expand to fill extra space. How would you adjust the property?

2-5 years experience

1. 1Your team built a product page using CSS Grid, but after adding a new promotional banner the layout breaks on mobile. The grid-template-columns is set to repeat(4, 1fr). Walk me through how you would debug and fix it.
2. 2We want a responsive gallery where the number of columns changes based on viewport width without media queries. How could you use grid-template-columns to achieve that?
3. 3A colleague changed grid-template-columns from minmax(200px, 1fr) to 200px 1fr and the items no longer shrink as expected. Explain why and what you would recommend.

5-8 years experience

1. 1Design a reusable CSS Grid component for a dashboard that must support dynamic addition/removal of widgets, each spanning variable column widths. How would you structure grid-template-columns to accommodate unknown numbers of columns while keeping performance in mind?
2. 2Our design system is migrating from a legacy float‑based layout to CSS Grid across hundreds of pages. What strategy would you use for grid-template-columns definitions to ensure backward compatibility and minimal reflow impact?
3. 3Explain the trade‑offs between using fixed pixel values, fr units, and minmax() in grid-template-columns for a high‑traffic e‑commerce site that must render quickly on low‑end devices.

8+ years experience

1. 1At the architecture level, how would you standardize grid-template-columns across multiple product teams to maintain visual consistency while allowing team autonomy? Discuss governance, tokenization, and tooling.
2. 2When refactoring a monolithic web app to a micro‑frontend architecture, how would you handle grid-template-columns definitions to avoid layout clashes between independently deployed front‑ends?
3. 3Consider a legacy application that heavily uses CSS Grid with complex nested grids. What migration path would you propose to move to a design‑system‑driven approach, and how would you manage the risk of breaking existing layouts?