How to Use the CSS fr Unit

The CSS Grid fr unit sizes a track as a fraction of the space left in the grid container after fixed-size tracks, gaps, and sizing constraints are accounted for. Use 1fr 1fr for equal flexible tracks and 1fr 2fr for a 1:2 flex-factor ratio. If a track unexpectedly overflows or will not shrink, check its automatic minimum; minmax(0, 1fr) allows the track to shrink to zero, though its contents may still need wrapping or overflow rules.

What does fr mean in CSS Grid?

The W3C CSS Grid Layout Module Level 2 defines a flexible length as “a fraction of the leftover space in the grid container.” The key word is leftover: an fr value is not automatically a percentage of the full container width. Fixed tracks and gaps use space first, and track sizing constraints can affect the final rendered sizes. Read the CSS Grid specification.

Each flexible track has a flex factor: the number before fr. For example, if two flexible tracks can use 600 pixels after other sizing is resolved, 1fr 2fr expresses a one-to-two share of that flexible space. Do not assume the final widths will always be in that exact ratio: content-based minimums and other track-sizing rules can constrain a track.

Basic fr patterns

Equal columns

<style>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.card { padding: 16px; background: #eee; }
</style>

<div class="grid">
  <div class="card">First column</div>
  <div class="card">Second column</div>
</div>

Both columns have the same flex factor. The gap is space between tracks, so it is not part of either track’s share. For three equal columns, write repeat(3, 1fr).

Unequal flexible columns

.content-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
}

The second track has twice the flex factor of the first. This describes their relative flexible shares, subject to minimum sizes and other track-sizing constraints.

Fixed sidebar with a flexible main column

.layout {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 1.5rem;
}

The first track is fixed at 16rem; the second takes flexible space remaining in the grid. If the container is too narrow to fit the sidebar, gap, and main track’s minimum size, the layout can still overflow. Choose a responsive breakpoint or a smaller sidebar floor if needed.

Fractional flex factors

The number before fr can be fractional, such as 2.5fr. The unit attaches directly to the number. See MDN’s <flex> reference.

Responsive columns with repeat() and minmax()

Use a repeated minimum and flexible maximum when the column count should adapt to available space:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

Here, 14rem is the minimum track size selected for this example, not a universal value. Choose a floor that suits the content. auto-fill creates as many repeated tracks as fit; unlike a fixed count such as repeat(3, 1fr), the number depends on available space. Consult MDN’s guides to Grid layout basics and minmax().

minmax(min, max) defines a track-size range. Its maximum may be an fr value, but its minimum cannot. For example, minmax(200px, 1fr) means the track has a 200-pixel floor and may flex larger. If the maximum is smaller than the minimum, the maximum is ignored and the minimum is used.

Why a 1fr track may overflow

A bare flexible track has an automatic minimum, effectively minmax(auto, 1fr). That automatic minimum can depend on the grid items’ content and minimum sizes. A long unbreakable word, wide image, or other intrinsically wide item can therefore keep a track wider than expected.

When the track itself must be allowed to shrink below that automatic minimum, set an explicit zero minimum:

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

This permits the track to shrink; it does not guarantee that every child will fit. The child may still need min-width: 0, wrapping, responsive sizing, or an intentional overflow rule. Apply the fix to the element that causes the overflow after inspecting the actual markup and content.

Choose the right pattern

Need	Pattern	What to decide
Known count of equal columns	`repeat(3, 1fr)`	Set the explicit number of tracks and check that each item fits.
Flexible columns with a chosen ratio	`1fr 2fr`	Set relative flex factors; account for content minimums.
Fixed region plus a flexible region	`16rem 1fr`	Choose a fixed track that fits the narrowest supported container.
Automatic repeated columns with a floor	`repeat(auto-fill, minmax(14rem, 1fr))`	Choose a meaningful minimum for the content.
Flexible track must shrink below content minimum	`minmax(0, 1fr)`	Also decide how the item itself should wrap, shrink, or overflow.

Debugging checklist

Identify which tracks use fr and whether the grid container has a definite or constrained size.
Account for fixed tracks and every column gap before reasoning about remaining space.
Inspect item content for unbreakable strings, wide images, intrinsic widths, or other minimum-size constraints.
Choose whether the track needs a meaningful floor, such as minmax(14rem, 1fr), or should be allowed to shrink to zero with minmax(0, 1fr).
If a track can shrink but content still spills out, inspect the grid item. Test wrapping, min-width: 0, responsive media sizing, or deliberate overflow handling as appropriate.
For a responsive grid, verify the chosen minimum and gap against the narrowest container your layout must support.

Runnable example: a responsive card grid

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive CSS Grid with fr</title>
<style>
  * { box-sizing: border-box; }
  body { margin: 0; padding: 24px; font: 16px/1.5 sans-serif; }
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: 16px;
  }
  .card { min-width: 0; padding: 16px; border: 1px solid #bbb; }
  .card img { display: block; max-width: 100%; height: auto; }
  .long-token { overflow-wrap: anywhere; }
</style>
<main class="cards">
  <article class="card"><h2>First</h2><p>A card that grows with its flexible track.</p></article>
  <article class="card"><h2>Second</h2><p class="long-token">AVeryLongUnbrokenValueThatCouldOtherwisePushItsTrackWider</p></article>
  <article class="card"><h2>Third</h2><p>The repeated tracks adapt to available space.</p></article>
</main>
</html>

The inner min() prevents the chosen minimum from exceeding a very narrow available width. min-width: 0 on the card and wrapping on the long token address item sizing and text wrapping in this example; the right treatment depends on the content in your own layout.

Browser support

MDN marks both the <flex> value (including fr) and minmax() as Baseline Widely available. The references list availability dates of March 2017 for <flex> and October 2017 for minmax(). For a project that supports a specific legacy browser, check the current compatibility tables rather than relying on a version number inferred from those dates. See MDN’s flex reference and minmax reference.

Performance, reliability, and cost

CSS Grid sizing is handled by the browser as part of layout. This topic has no external service or per-request cost; the practical work is choosing track constraints that match the content and checking the result at relevant container sizes. Do not expect a particular layout to avoid overflow solely because it uses fr: intrinsic minimums, fixed tracks, and gaps still matter.

Or skip the browser setup

If you need a screenshot of a page to inspect how its Grid layout renders, ScreenshotNeo is a website screenshot API and MCP server. A CSS Grid layout is still determined by its styles and content; a screenshot can help you inspect the rendered result at a chosen viewport.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo API documentation for request options. Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

FAQ

Is 1fr the same as 50%?

No. It is a flex factor for sharing leftover space among flexible tracks. Fixed tracks, gaps, and track constraints affect the available space and final sizes.

Can I write 2.5fr?

Yes. The number before fr can be fractional, for example 2.5fr.

Should I always use minmax(0, 1fr)?

No. Use it when a track needs permission to shrink below its automatic minimum. If the design requires a minimum width, specify that floor instead, and handle any oversized item content deliberately.

What is the difference between auto-fill and a fixed repeat count?

A fixed count such as repeat(3, 1fr) declares three repeated tracks. auto-fill determines how many repeated tracks fit according to the available space and the track sizing pattern.