MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
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.
fr): Smart Free Space SlicingThe 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:
gap distances.fr units according to their ratio!repeat() Function: Writing Dry CSSWriting 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:
You can also repeat multi-track patterns:
gap Property: Flawless Gutter SpacingBefore 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.fr with Fixed PixelsOne 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!
| Bad Practice (Don't) | Good Practice (Do) | Why? |
|---|---|---|
Using width: 25% with grid-template-columns and gap | Use repeat(4, 1fr) | 4 * 25% + 3 gaps exceeds 100% and triggers overflow scrollbars. |
Writing repeat(1fr, 4) | Write repeat(4, 1fr) | The first parameter is always the repeat count (number of times). |
Writing grid-gap in new codebases | Use standard gap, row-gap, and column-gap | The old grid-gap prefix is legacy; gap is the modern cross-specification standard. |
Forgetting that 1fr has an implicit min-width: auto | Use minmax(0, 1fr) if long strings or code blocks force track expansion | Prevents wide code snippets from blowing out column widths. |
fr Unit: Represents one proportional slice of available positive space after fixed units and gaps are subtracted.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.fr + gap never overflows the container, completely replacing messy percentage hacks.grid-template-columns: 1fr 3fr;?grid-template-columns: 1fr 1fr 1fr 1fr;?fr units when a fixed pixel track and a gap are present?repeat(3, 1fr) superior to repeat(3, 33.333%) when using gap: 20px?Construct an interactive School Annual Day Photo Wall gallery:
display: grid; with grid-template-columns: repeat(4, 1fr); for a clean 4-column desktop album layout.gap: 20px; for uniform gutter separation between frames.@media (max-width: 768px), switch to repeat(2, 1fr) for mobile responsiveness.Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Test your understanding of this lesson with 5 questions. Each question has one correct answer.