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 you are helping the P.E. teacher arrange chairs on the school auditorium stage for the Annual Day guests. The stage is wide enough to fit up to 6 chairs in a row.
Today, only 2 guest speakers have arrived.
auto-fill): You place the 2 chairs on the left, but you keep all 4 empty "ghost" spaces reserved on the right. The 2 chairs remain small and compact.auto-fit): You look at the stage and say: "We only have 2 guests, let us spread them out across the entire stage!" The empty slots collapse to zero, and the 2 chairs stretch out luxuriously to fill the entire width!+-------------------------------------------------------------------------+ | THE AUDITORIUM CHAIR ANALOGY | | | | Scenario: Wide container with only 2 items (ideal width: 200px) | | | | 1. `auto-fill`: Preserves empty tracks (Ghost Slots remain!) | | +-------------------------------------------------------------------+ | | | [ Guest 1: 200px ] [ Guest 2: 200px ] [ Empty ] [ Empty ] [ Empty ] | | | +-------------------------------------------------------------------+ | | | | 2. `auto-fit`: Collapses empty tracks (Items stretch to fill stage!) | | +-------------------------------------------------------------------+ | | | [ Guest 1: Stretches 50% ] [ Guest 2: Stretches 50% ] | | +-------------------------------------------------------------------+ | +-------------------------------------------------------------------------+
Before CSS Grid introduced auto-fit and minmax(), making a responsive card grid required writing 4 different media queries: one for phones (375px), one for tablets (768px), one for laptops (1024px), and one for desktop monitors (1440px).
With the Holy Grail Grid Formula, you can build a 100% fluid, auto-responsive grid in one single line of CSS with zero media queries!
minmax() Function: Setting BoundariesThe minmax(min, max) function defines a sizing range for a track:
min: The smallest size the track is ever allowed to shrink to.max: The largest size the track is allowed to expand to.repeat(auto-fit, minmax(280px, 1fr))Here is the famous one-line formula used by Google, Netflix, and every top design system in the world:
1fr.1fr.@media queries! The browser recalculated the column count dynamically based purely on the available viewport mathematics.auto-fit vs auto-fill: The Deep DifferenceWhen you have enough items to fill an entire row, auto-fit and auto-fill produce the exact same visual result. The difference appears only when you have fewer items than can fit on a row:
| Feature | auto-fit | auto-fill |
|---|---|---|
| Empty Tracks | Collapses empty tracks to 0px | Preserves empty tracks at their minimum size |
| Expansion Behavior | Items stretch across the entire row | Items stay at minimum size if empty slots remain |
| Best Used For | Card grids, blogs, product catalogs (#1 choice) | Fixed-size toolbars, calendar slot placeholders |
If you place a card containing a very long word, URL, or code block inside minmax(250px, 1fr), you might discover that the column refuses to shrink below the word length.
Why? Because the default minimum size in CSS Grid is min-width: auto.
To make your responsive grid 100% indestructible against long text and image overflow, use:
The min(100%, 280px) ensures that even on an old iPhone SE with a 280px screen and 16px padding (leaving only 248px), the card will shrink below 280px rather than creating horizontal scrolling!
| Bad Practice (Don't) | Good Practice (Do) | Why? |
|---|---|---|
| Writing 5 separate media queries for a basic card grid | Use repeat(auto-fit, minmax(280px, 1fr)) | Reduces code by 80% and smoothly adapts to all screen sizes. |
Using auto-fill when you want cards to expand across the row | Use auto-fit | auto-fit collapses ghost tracks so existing cards can expand. |
Setting minmax(1fr, 300px) | Always set min first, then max: minmax(300px, 1fr) | In minmax(min, max), the minimum value must always come first. |
Using minmax(200px, 200px) | Just write 200px | minmax is only needed when the minimum and maximum boundaries differ. |
minmax(min, max): Enforces a minimum floor and maximum ceiling on a track's dimensions.auto-fit: Creates as many columns as will fit, then collapses empty slots to 0px so active items expand.auto-fill: Creates as many columns as will fit, but keeps empty slots reserved at their minimum width.grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); delivers automatic responsive column wrapping without writing a single media query!repeat(auto-fit, minmax(250px, 1fr)) accomplish?auto-fit behave differently from auto-fill when there are fewer items than total available column slots?minmax(200px, 1fr), what does 200px represent?minmax(), but NOT as the minimum value?min(100%, 280px) recommended inside minmax() on ultra-small mobile displays?Build an auto-responsive School Book Store Catalog:
display: grid; with the Holy Grail formula: grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));.gap: 24px;.@media query!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.