Grid Gap, Fractional Units (fr), and the repeat() Function

Imagine bringing a large box of Kaju Katli (sweets) to school on your birthday. You have 3 friends with you. You don't pull out a geometric ruler to measure each piece in millimeters! Instead, you divide the sweets into equal shares: "One share for you, one share for you, one share for you, and one share for me."

If one friend stayed back to help you decorate the classroom board, you might decide: "He gets 2 shares, and the rest of us get 1 share each!"

+-------------------------------------------------------------------------+
|                  THE FRACTIONAL UNIT (fr) PIE SLICE                     |
|                                                                         |
|  Container Width: 1000px  |  Formula: Total Shares = 1fr + 2fr + 1fr = 4|
|                                                                         |
|  [ Col 1: 1fr ]   [       Col 2: 2fr       ]   [ Col 3: 1fr ]           |
|     (250px)       |         (500px)        |      (250px)               |
|  <--- 1 Share --->|<------- 2 Shares ------>|<--- 1 Share --->|         |
+-------------------------------------------------------------------------+

Before CSS Grid, developers were trapped doing painful percentage math: width: 33.333333% which broke into ugly decimal rounding errors whenever a 10px margin was added.

The Fractional Unit (fr), paired with gap and the repeat() function, solved this problem permanently. In this tutorial, you will master this trio of modern CSS Grid superpowers.

1. The Fractional Unit (fr): Smart Free Space Slicing

The fr unit represents a fraction of the available free space in the grid container.

Unlike pixels (which are rigid) or percentages (which don't account for gaps), the browser's Grid math engine calculates fr in 3 foolproof steps:

1. 1
   It measures the total container width.
2. 2
   It subtracts any fixed pixel tracks (like a 250px sidebar) and all gap distances.
3. 3
   It divides whatever space is left over among the fr units according to their ratio!

2. The repeat() Function: Writing Dry CSS

Writing 1fr 1fr 1fr 1fr 1fr 1fr for a 6-column calendar or photo gallery is tedious, repetitive, and hard to read.

The repeat() function lets you declare identical tracks in a clean, compressed shorthand:

Repeating Patterns

You can also repeat multi-track patterns:

3. The gap Property: Flawless Gutter Spacing

Before modern CSS, putting spacing between columns required adding margin-right on all cards and using .card:last-child { margin-right: 0; } hacks.

With CSS Grid, the gap property applies spacing strictly between tracks, never on the outer container edges!

• row-gap: 24px;: Space between horizontal rows.
• column-gap: 16px;: Space between vertical columns.
• gap: 20px;: Applies equal 20px spacing to both rows and columns.

4. Mixing fr with Fixed Pixels

One of the most practical production layouts is a fixed sidebar next to a fluid dashboard content area:

No matter if the screen is resized to 1200px or 1920px wide, the sidebar stays exactly 260px, while the 1fr main area stretches smoothly without a single pixel of horizontal overflow!

5. Common Mistakes to Avoid (Do's and Don'ts)

6. Quick Revision Summary (Cheat Sheet)

• fr Unit: Represents one proportional slice of available positive space after fixed units and gaps are subtracted.
• Ratio Sizing: 1fr 3fr gives column 2 three times as much leftover room as column 1.
• repeat(count, size): Duplicates track definitions efficiently (e.g. repeat(12, 1fr) for a 12-column design system).
• gap: 20px: Adds 20px gutter space between rows and columns without adding unwanted margins on the outside edges.
• No Overflow: fr + gap never overflows the container, completely replacing messy percentage hacks.

Multiple Choice Questions

1. In a container of 1000px width with no gaps, what is the computed width of the second column in grid-template-columns: 1fr 3fr;?

A. 250px B. 500px C. 750px D. 1000px Answer: C Explanation: Total shares = 1fr + 3fr = 4fr. Each 1fr = 1000px / 4 = 250px. The second column has 3fr, so 3 * 250px = 750px.

2. What is the shorthand equivalent of writing grid-template-columns: 1fr 1fr 1fr 1fr;?

A. grid-template-columns: repeat(4, 1fr); B. grid-template-columns: 4 * 1fr; C. grid-template-columns: repeat(1fr, 4); D. grid-template-columns: quad(1fr); Answer: A Explanation: The repeat() function takes the repetition count first, followed by the track size: repeat(4, 1fr).

3. How does the browser calculate the width of fr units when a fixed pixel track and a gap are present?

A. It ignores the gap and fixed track completely B. It subtracts the fixed track and gap distances from the container width first, then distributes the remaining space among the fr units C. It converts pixels to percentages automatically D. It causes a CSS compilation error Answer: B Explanation: The fractional unit is calculated strictly from the available positive free space remaining after all non-flexible sizes and gaps are subtracted.

4. Which property sets a 30px gap between grid rows and a 15px gap between grid columns?

A. gap: 30px 15px; B. gap: 15px 30px; C. margin: 30px 15px; D. padding: 30px 15px; Answer: A Explanation: The gap shorthand follows the standard vertical-first order: gap: <row-gap> <column-gap>; hence gap: 30px 15px;.

5. Why is repeat(3, 1fr) superior to repeat(3, 33.333%) when using gap: 20px?

A. Percentages do not render on Android devices B. Percentages do not subtract gap distances, resulting in container overflow (3 * 33.333% + 40px > 100%) C. repeat() does not accept percentage units D. fr units load 10x faster from the server Answer: B Explanation: The fr unit accounts for gutter gaps before distributing space, ensuring the grid always stays within 100% container bounds.

7. Hands-on Practice Challenge: School Annual Fest Photo Wall

Construct an interactive School Annual Day Photo Wall gallery:

1. 1
   Use display: grid; with grid-template-columns: repeat(4, 1fr); for a clean 4-column desktop album layout.
2. 2
   Use gap: 20px; for uniform gutter separation between frames.
3. 3
   Inside @media (max-width: 768px), switch to repeat(2, 1fr) for mobile responsiveness.