HTML & CSS · Grid Layout · Lesson 16 of 25
Responsive Grids with auto-fit
Concept
Responsive Grids with auto-fit
repeat(auto-fit, minmax(200px, 1fr)) creates a grid that automatically adds or removes columns based on available space.
This single line replaces what would otherwise require several media queries — the browser recalculates the column count itself as the container resizes.
By the end of this lesson
- Explain the core idea behind Responsive Grids with auto-fit.
- Predict output before running a change.
- Test one realistic and one unusual input.
- Use the result to make the next decision.
How to study this page
- 1. Read one concept.
- 2. Change the example.
- 3. Run, compare, and explain.
- 4. Complete the challenge below.
Syntax
.selector {
grid-template-columns: repeat(auto-fit, minmax(minSize, 1fr));
}ExampleRunnable
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}auto-fill vs auto-fit
/* auto-fill leaves empty tracks if there aren't enough items */
/* auto-fit collapses empty tracks so items stretch to fill space */Note: With few items, auto-fit stretches them to fill the row, while auto-fill leaves gaps as if more items were coming.
Self-check before continuing
Without looking at the example, describe what changes when you modify one input in Responsive Grids with auto-fit. Then reopen the editor and prove your explanation with a small test.
You are ready to continue when you can predict, test, and explain the result.
Your turn
Build a card grid that reflows from 3 columns down to 1 as the screen narrows.
Loading editor…
Console