HTML & CSS Interview Question #97

What is the fr unit in CSS Grid?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

The fr unit represents a fraction of the available space in a grid container after relevant fixed sizes, gaps, and sizing constraints are considered. It makes proportional track sizing concise.

Detailed Explanation

The fr unit represents a fraction of the available space in a grid container after relevant fixed sizes, gaps, and sizing constraints are considered. It makes proportional track sizing concise.

For example, 1fr 2fr creates two flexible tracks where the second receives twice the distributable fraction of the first. minmax(0, 1fr) can be useful when content must be allowed to shrink without causing overflow.

Code Example

.layout {
    display: grid;
    grid-template-columns:
        1fr 2fr;
}

.safe-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) minmax(0, 2fr);
}