What does the repeat() function do in Grid?

0-2 years experience

1. 1We need a three‑column layout where each column is 200px wide. How would you write the grid-template-columns using repeat()?
2. 2If you set grid-template-columns: repeat(4, 1fr) and then add a fifth column in the HTML, what happens to the layout?
3. 3How would you create a responsive grid that has auto‑filling columns each at least 150px using repeat()?

2-5 years experience

1. 1Your product page uses grid-template-columns: repeat(3, 200px) but on a small screen the columns overflow. How would you modify the repeat() usage to make it responsive?
2. 2A colleague changed grid-template-columns from repeat(2, 1fr) to repeat(2, minmax(200px, 1fr)) and the layout broke in Firefox. What could be causing the issue and how would you debug it?
3. 3Explain why using repeat(auto-fill, minmax(250px, 1fr)) is preferable to manually writing out many columns for a dynamic list of cards.

5-8 years experience

1. 1You are refactoring a dashboard that has dozens of grid containers with varying column counts. How would you standardize the column definitions using repeat() to improve maintainability and theming?
2. 2Discuss the performance implications of using repeat(auto-fit, minmax(...)) versus a fixed repeat count in a large, data‑driven grid that can render thousands of items.
3. 3When integrating CSS Grid with a CSS‑in‑JS solution, what challenges might arise with repeat() values that depend on runtime variables, and how would you address them?

8+ years experience

1. 1Our design system currently mixes flexbox and grid with hard‑coded column counts. Propose a migration strategy to a unified system that leverages repeat() for scalability across teams.
2. 2How would you ensure that repeat() based grid definitions remain consistent and testable across multiple micro‑frontends that are independently deployed?
3. 3Consider a legacy application that generates CSS on the server side. What are the trade‑offs of moving repeat() logic to the client versus keeping it server‑generated, especially regarding caching and bundle size?