📚 Lesson 3: Understanding FR Units & Repeat

What Are FR Units?

The fr unit stands for "fraction" and is Grid's secret weapon for creating flexible layouts. It represents a fraction of the available space in the grid container.

Think of fr units like slicing a pie. If you have 1fr 1fr 1fr, you're dividing the space into three equal slices. Each column gets one slice.

How FR Units Work

Example 1: Equal Columns

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

This creates three columns that each take up 1 fraction of space. Since all fractions are equal (1:1:1), you get three equal columns.

Example 2: Unequal Columns

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

Now we have a ratio of 1:2:1. The middle column gets 2 fractions while the side columns get 1 each. If the container is 800px wide, the columns would be: 200px, 400px, 200px.

Mixing FR with Other Units

One of the most powerful features of fr units is that you can mix them with fixed units like pixels or percentages.

Fixed Sidebar + Flexible Content

.container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
}

This creates a fixed 250px sidebar and a flexible content area. The content area takes up whatever space is left after the sidebar and gap are accounted for.

Holy Grail Layout

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 20px;
}

Two fixed sidebars (200px each) with a flexible content area in the middle. This is a classic three-column layout that works on any screen size.

The Repeat() Function

Writing 1fr 1fr 1fr 1fr 1fr gets tedious. The repeat() function is a shorthand for repeating patterns.

Basic Repeat

/* Instead of this: */
grid-template-columns: 1fr 1fr 1fr 1fr;

/* Write this: */
grid-template-columns: repeat(4, 1fr);

repeat(4, 1fr) means "repeat 1fr four times". Much cleaner!

Repeat with Patterns

You can repeat more complex patterns too:

/* Creates: 1fr 2fr 1fr 2fr 1fr 2fr */
grid-template-columns: repeat(3, 1fr 2fr);

Mixing Repeat with Other Values

/* Creates: 200px 1fr 1fr 1fr 300px */
grid-template-columns: 200px repeat(3, 1fr) 300px;

This creates a fixed left sidebar (200px), three equal flexible columns, and a fixed right sidebar (300px).

Practical Examples

Card Grid (4 Columns)

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

Perfect for product listings, image galleries, or blog post grids.

Dashboard Layout

.dashboard {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  grid-template-rows: 60px 1fr;
  gap: 16px;
}

Sidebar navigation (200px), header (60px), and three flexible content columns. Perfect for admin panels or dashboards.

Blog Layout with Sidebar

.blog-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

Main content area gets 2 fractions (2/3 of width), sidebar gets 1 fraction (1/3 of width). This maintains a 2:1 ratio on any screen size.

FR Units vs Percentages

You might wonder: "Why not just use percentages?" Here's why fr units are better:

With Percentages (Problems)

/* With gap, this breaks! */
grid-template-columns: 33.33% 33.33% 33.33%;
gap: 20px;

The columns add up to 100%, but the gap takes up additional space. Your columns will wrap or overflow!

With FR Units (Works Perfectly)

/* Gap is automatically accounted for */
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;

Grid automatically subtracts the gap space before calculating column widths. Everything just works!

Advanced Pattern: Responsive Grid

Here's a powerful pattern that creates a responsive grid without media queries:

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

This creates as many columns as will fit, with each column at least 250px wide but able to grow to fill available space. We'll cover this in detail in the Responsive Grids lesson!

Quick Reference

• 1fr - One fraction of available space
• 2fr - Two fractions (twice as large as 1fr)
• repeat(4, 1fr) - Four equal columns
• repeat(3, 100px) - Three 100px columns
• 200px 1fr - Fixed + flexible column
• 1fr 2fr 1fr - Ratio of 1:2:1

What You've Learned

You now understand Grid's most powerful features! With fr units and repeat(), you can create flexible, maintainable layouts that work on any screen size. In the next level, we'll use these tools to build real-world layouts.