In CSS Grid, fr allocates a proportional share of the space left for flexible tracks after fixed track sizes and gaps are accounted for. Use equal factors such as 1fr 1fr for equal flexible columns, or 1fr 2fr for a 1:2 flex-factor ratio. If a track refuses to shrink, its automatic minimum size—and sometimes the grid item’s own content—may be the reason.
What does fr mean in CSS?
fr is the flexible length unit for CSS Grid tracks. The W3C CSS Grid Layout Module Level 2 specification defines it as “a fraction of the leftover space in the grid container.” The specification describes how flexible tracks share that remaining space.
As an Amazon Associate I earn from qualifying purchases.
That means 1fr is not automatically one percent or one fixed fraction of the container’s full width. Fixed-size tracks and gaps take space first, and track-sizing constraints can affect the final result. Flexible tracks divide the space available to them in proportion to their flex factors.
How do equal and unequal fr values work?
The number before fr is a flex factor. With two flexible tracks, 1fr 1fr assigns them equal factors; 1fr 2fr assigns the second track twice the factor of the first. The ratio describes how flexible space is shared, not a guarantee of exact final widths if content-based minimums or other sizing rules intervene. Fractional factors such as 2.5fr are valid. MDN’s <flex> reference documents the unit.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.equal-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.wide-second-column {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
}How do you combine flexible tracks with fixed sizes?
Use a fixed track for a region that should retain a set size and an fr track for the space-taking region. Remember that the gap is also part of the container space, so the flexible track receives what remains after fixed tracks and gaps are accounted for.
.layout {
display: grid;
grid-template-columns: 16rem 1fr;
gap: 1.5rem;
}Here the first column is fixed at 16rem; the second is flexible. If the grid container is too narrow for its fixed track, gap, and other constraints, the layout may still overflow—the fr value does not override those constraints.
How do you choose between a fixed column count and responsive repetition?
Use repeat(3, 1fr) when you want exactly three equal explicit tracks. Use auto-fill with minmax() when the repeated track count should respond to available space and each track needs a minimum size you choose for its content.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute/* Three equal columns */
.three-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
/* Responsive count; choose a minimum that fits your cards */
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
}In the responsive example, 14rem is an example floor, not a universal recommendation. Choose a minimum that suits the content and the space available. MDN’s Grid basics guide and its minmax() reference cover these patterns.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Why can a 1fr track overflow or refuse to shrink?
A bare flexible track has an automatic minimum size, effectively minmax(auto, 1fr) for a 1fr track. That minimum can be influenced by grid items and their content. A long unbreakable word, wide image, or other intrinsically wide content can therefore keep the track wider than expected.
If the track must be allowed to shrink below its content-based automatic minimum, set its minimum to zero explicitly:
.main {
display: grid;
grid-template-columns: minmax(0, 1fr);
}minmax(min, max) defines a track-size range. Its maximum may be an fr value, but its minimum may not. For example, minmax(200px, 1fr) gives the track a 200px floor and a flexible maximum; minmax(0, 1fr) permits the track minimum to reach zero. If the maximum is smaller than the minimum, the maximum is ignored and the minimum is used. MDN documents these rules.
Free tools Windows power users keep installed
One-click scans. No signup required.
Removing the track’s automatic minimum does not automatically make every item inside it fit. Depending on the markup and content, the item may also need wrapping, min-width: 0, or deliberate overflow handling. Choose the treatment that matches the content rather than treating minmax(0, 1fr) as a universal overflow fix.
Best Value
How to diagnose an unexpected Grid width
- Identify the flexible tracks. Check the computed or declared
grid-template-columnsorgrid-template-rowsvalues and note which tracks usefr. - Account for space already used. Include fixed-size tracks and the grid’s
gapvalues when considering what remains for flexible tracks. - Check automatic minimums. Look for long unbreakable text, wide images, or other content that may establish a track’s minimum size. Try
minmax(0, 1fr)only when the track should be allowed to shrink below that minimum. - Choose the intended floor. Use a meaningful minimum such as
minmax(200px, 1fr)when the track must not become narrower than the content can use; use a zero minimum only when that is acceptable. - Inspect the grid item, too. If content still escapes the track, test wrapping,
min-width: 0, or an appropriate overflow rule on the item. Verify the result with your actual markup and content.
Browser availability
MDN marks both the <flex> value and minmax() as Baseline Widely available; MDN gives March 2017 for <flex> and October 2017 for minmax(). Those dates do not specify individual browser versions. If your project targets a particular legacy browser, check MDN’s current compatibility information for that browser.
Or skip the browser setup
If you need screenshots of a page to inspect a Grid layout, ScreenshotNeo can return an image from one GET request. Its capture process accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, with response headers identifying the page verdict and billing status. Its MCP server provides screenshot, page-info, and PDF-capture tools for AI agents.
For example, capture a page as WebP with cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo has a free plan with 1,000 screenshots per month and no card required; paid plans start at $5 for 3,000 screenshots. Learn about ScreenshotNeo or sign up for the free plan.
Recommended Free Tools
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
