In CSS Grid, the fr unit stands for fractional unit. It represents a portion of the available space in the grid container. Using fr makes it easy to create flexible, responsive layouts that automatically distribute space among grid columns or rows.

Key Points

1
1fr represents one fraction of the available space in the grid container.
2
You can combine fr with fixed units like px or % to create mixed layouts.
3
If you define multiple columns with fr, the available space is divided proportionally.
4
fr units make layouts responsive without needing to calculate widths manually.

Example: Using fr Units for Flexible Columns

Difficulty: 3/10

Topics: fr unit sizing, grid layout responsiveness, fractional unit vs percentage

Scenario Questions

0-2 years experience

1
You're building a two-column layout where the left column should take up 1/3 of the available space and the right column 2/3. How would you use fr units to achieve that, and what happens if you set the right column to 2fr instead of 2fr?
2
If you define a grid with three columns: 1fr, 100px, 1fr, and the container is only 200px wide, what will happen to the fr columns? Why?
3
You set up a grid with 2fr and 1fr tracks, but the content in the 1fr column is overflowing. What’s the most likely cause, and how would you fix it?

2-5 years experience

1
A product page grid breaks on tablets: the sidebar collapses too early, and the main content gets squished. The grid uses 1fr for sidebar and 3fr for content. How would you debug and fix this without hardcoding breakpoints?
2
Your team’s component library uses fr units for a dashboard grid, but users report inconsistent spacing when resizing windows. You notice some tracks have minmax() but others don’t. What’s the root cause, and how would you standardize it?
3
A modal with a grid layout works fine in Chrome but overflows in Safari. The grid uses fr units with no min-content constraints. What’s likely happening, and how do you resolve it cross-browser?

5-8 years experience

1
You’re designing a responsive admin dashboard with 6+ dynamic panels that can be rearranged by users. The grid uses fr units for flexibility, but performance degrades on low-end devices during drag-and-drop. How would you optimize the layout system without losing responsiveness?
2
A legacy component uses percentage-based widths for a grid that’s now being migrated to CSS Grid. Why might replacing percentages with fr units cause layout shifts in edge cases, and how would you safely migrate without breaking existing layouts?
3
Your team’s design system uses fr units for all grid layouts, but accessibility audits show screen readers struggle with reading order when fr tracks are reordered via grid-template-areas. How do you reconcile flexible layout with semantic structure?

8+ years experience

1
You’re leading a cross-team initiative to standardize layout systems across 15+ products. Some teams use fr units, others use flexbox with percentages. What are the long-term maintenance, scalability, and accessibility tradeoffs of standardizing on fr units for all grid-based layouts?
2
A legacy platform has thousands of grid templates using hardcoded pixel widths. Migrating to fr units would improve responsiveness but risks breaking legacy content that assumes fixed sizing. How would you design a phased migration strategy that minimizes risk and ensures backward compatibility?
3
Your company is adopting a design token system for layout units. Should fr units be included as a first-class token, or should you abstract them behind a custom unit like 'grid-unit'? Justify your architectural decision considering future extensibility, tooling, and developer experience.

Follow-up Questions

❓What happens if you mix fr units with fixed widths in the same grid track?
❓How would you debug a grid that looks broken on mobile but works on desktop?
❓Why might fr units cause unexpected scrollbars in a nested grid?