How do you create equal-width columns using Grid?

0-2 years experience

1. 1You need a three‑column layout where each column is the same width regardless of screen size. How would you write the CSS Grid rule?
2. 2If you set `grid-template-columns: 1fr 1fr 1fr;` but the container has a max‑width, what will the columns look like?
3. 3What happens to the layout if a fourth child element is added to that grid without changing the column definition?

2-5 years experience

1. 1Our product page can show 2 to 5 feature cards. How would you use CSS Grid so the cards always have equal width and wrap nicely on smaller screens?
2. 2During a code review you see `grid-template-columns: repeat(3, 1fr)` but the layout breaks when a sidebar is added. What might be causing the break and how would you fix it?
3. 3Why did using `grid-auto-columns: 1fr` behave unexpectedly when the number of items changed dynamically, and how would you correct it?

5-8 years experience

1. 1The dashboard component is shared across many micro‑frontends with different theming and container sizes. How would you design a reusable CSS Grid utility that guarantees equal‑width columns while allowing overrides for gutters and max column counts?
2. 2When the site is printed, the equal‑width grid collapses into a single column. What CSS strategies would you use to maintain a sensible printed layout?
3. 3Discuss the performance and maintainability implications of nesting many `1fr` grids versus falling back to flexbox for older browsers.

8+ years experience

1. 1We are migrating a large legacy codebase that uses floats for column layouts to CSS Grid. What migration plan would you propose to replace equal‑width column patterns across dozens of pages while minimizing regression risk?
2. 2How would you establish a cross‑team design‑system token (e.g., `--grid-columns`) that standardizes equal‑width column counts and integrates with our CSS‑in‑JS pipeline?
3. 3A feature team wants to introduce a CSS Grid equal‑width column layout, but the global style guide enforces a 12‑column fixed‑width grid. How would you reconcile these conflicting approaches at the architecture level?