🔢 CSS Grid Unit — Understanding the fr Fraction

🌐 What Is fr in CSS Grid?

The fr (fraction) unit is a special CSS Grid unit that represents a portion of the remaining available space inside a grid container. It makes grid layouts flexible, balanced, and responsive without fixed widths.

>>“The fr unit is the heart of modern grid layouts — it distributes space intelligently.”

Note

✔ Works only in CSS Grid
✔ Represents **flexible** space
✔ Automatically handles leftover space

📦 How fr Works

Think of fr as assigning “weights” to columns or rows. The grid divides the leftover space between all fr units proportionally.

Basic fr example

grid-template-columns: 1fr 1fr 1fr;

This creates 3 equal columns — each taking 1 portion of the free space.

📐 Example: Different Fractions

Proportional distribution

grid-template-columns: 1fr 2fr 1fr;
ColumnFractionSpace Share
Column 11fr25%
Column 22fr50%
Column 31fr25%

📦 How fr Calculates Space

Grid first calculates space used by:

  • Fixed units (px, %, ch, etc.)
  • min-content/max-content constraints
  • flexible tracks defined with minmax()

Then leftover space → divided among fr units.

🧪 Practical Examples

1️⃣ Equal Columns

3 equal columns

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

2️⃣ Sidebar + Content Layout

Sidebar Layout

.layout {
  display: grid;
  grid-template-columns: 250px 1fr; /* fixed sidebar + flexible content */
}

Sidebar stays 250px. Content takes remaining space.

3️⃣ Responsive Layout Using fr

Responsive columns

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Each card grows up to 1fr and wraps when needed.

4️⃣ Mixed Units (px + fr + %)

Mixed track sizing

.mixed-grid {
  display: grid;
  grid-template-columns: 200px 2fr 30% 1fr;
}

Note

fr fills leftover space after px and % tracks are resolved.

📈 Using fr with minmax()

minmax + fr

grid-template-columns: minmax(150px, 1fr) 2fr;

Minimum width is protected, but fr handles flexible growth.

⚠️ Key Details You Must Know

  • ❗ fr distributes only unused space
  • ❗ fr tracks shrink only after fixed-size tracks resolve
  • ❗ fr ignores content size unless wrapped in minmax()
  • ❗ fr can cause overflow if min-content is larger than fr allocation

Note

💡 To prevent overflow:minmax(0, 1fr) is the best practice for flexible columns.

🧪 Example — Fixing Overflow Issue

Prevent overflow

grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);

🎯 fr vs % vs auto

UnitBehaviorBest For
frShares leftover space proportionallyFlexible column systems
%Relative to parent widthFluid layouts without content control
autoSize based on content sizeContent-driven columns

🧠 When to Use fr

  • Building responsive grid layouts
  • Creating flexible content areas
  • Designing equal-height / equal-width cards
  • Replacing complicated percentage calculations
  • Building modern dashboard layouts

🔥 Summary

The fr unit is one of the most powerful features in CSS Grid. It simplifies layout calculations by dividing leftover space proportionally. Whether you’re building dashboards, cards, or full layouts, frgives you flexibility and clean responsive behavior.

>>“Use fr to let Grid do the math — and keep your layouts flexible.”

Learn more →MDN Docs 📘