Grid Minmax & Autofit
What are Minmax & Autofit?
Imagine a flexible card tray. You want the tray to hold as many cards side-by-side as possible. Each card must be at least 150px wide to be readable, but if there is extra space, you want the cards to stretch out to fill the tray instead of leaving blank empty gaps.In CSS Grid, we use responsive formulas to build grids that wrap automatically without needing media queries:
repeat(auto-fit, ...): Tells the browser to automatically create as many columns as fit inside the container.minmax(150px, 1fr): Sets the sizing boundaries for each column. The column can shrink down to 150px (its minimum limit), but can expand to fill available space proportionally (1fr) if the screen gets wider.Why does it matter?
This formula is the holy grail of responsive web design. Writing a single line of CSS:grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
instantly builds a fully responsive card grid that displays 4 columns on desktop, 2 columns on tablet, and 1 column on mobile screens without a single media query!
Syntax Breakdown
repeat(auto-fit, minmax(150px, 1fr)) — Fits as many columns as possible, clamping sizes between 150px and 1fr.Common Mistakes
minmax(1fr, 200px) is invalid because 1fr is a flexible unit and cannot be used as a static minimum size limit. The minimum must be a fixed unit (like px, rem, or %).Quick Reference
auto-fit — Fits maximum number of columns.minmax(min, max) — Clamps tracks sizes between limits.Your Task
Set the `grid-template-columns` property of `.auto-grid` to `repeat(auto-fit, minmax(150px, 1fr))`.
index.html
Type code above to start the lesson.
Live Preview