What is CSS Grid's fr unit?

The fr (fractional unit) is a CSS Grid-specific unit that represents a fraction of the available free space in the grid container. After fixed sizes and min-content requirements are satisfied, remaining space is distributed proportionally using fr units. grid-template-columns: 1fr 1fr 1fr creates three equal columns. grid-template-columns: 2fr 1fr creates two columns where the first is twice the width of the second. repeat(3, 1fr) is a convenient shorthand. The fr unit differs from percentages because it accounts for gap spacing — 1fr fills available space after gaps, while 33.33% does not account for gaps and can cause overflow.