Content updated
By the end, you can…
- Use fewer items than the grid can hold to see the difference: auto-fit collapses unused tracks; auto-fill retains them.
- Build a two-card responsive grid, compare empty tracks fairly, and keep it usable below the preferred card width.
Build on the CSS introduction
The CSS responsive lesson changes a column count at a breakpoint. This lesson lets the grid calculate its own repeat count from available width. The important comparison is not simply a wide screen against a small one: it is what happens when there is room for more tracks than there are items. Two cards in a wide container make that difference visible.
At a 640px preview width, the padded preview body gives the grid 608px. Four 140px minimum tracks with three 12px gaps can fit there. auto-fill retains those tracks even when only two contain cards. auto-fit collapses the unused repeated tracks and their associated gutters, allowing the two occupied flexible tracks to expand. With four cards filling all tracks, the two modes can look the same.
A fixed 140px minimum still cannot fit in an available width below 140px. min(100%, 140px) chooses the smaller of the container width and the preferred minimum. Nesting it inside minmax lets a single track fit a tiny container while retaining a flexible maximum. The final variant intentionally uses a 150px preview, leaving only 118px after body padding.
What to remember first
Use fewer items than the grid can hold to see the difference: auto-fit collapses unused tracks; auto-fill retains them.
Tools for this experiment
auto-fillRetain empty repeated tracks- The occupied cards do not automatically take the space reserved for empty tracks.
auto-fitCollapse empty repeated tracks- Occupied flexible tracks can grow into the released space.
min(100%, 140px)Cap the minimum by available width- It prevents a fixed preferred minimum from forcing an oversized single column.
minmax(..., 1fr)Grow beyond the minimum- The minimum controls fitting; the flexible maximum shares remaining space.
Walk through an example
Use this HTML inside the body of a document and place the CSS in your linked stylesheet. The preview adds a dashed outline and card colors to make boundaries visible; those decorations do not control the layout. Its body has 16px padding on each side. Fixed preview widths are intentional: on a small screen, scroll inside the preview to inspect the whole experiment.
<div class="layout">
<div class="item">A</div>
<div class="item">B</div>
</div>.layout {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}
.item {
min-width: 0;
overflow-wrap: anywhere;
padding: 8px;
}Unused tracks collapse, leaving two occupied tracks of about 298px each.
See it happen: try a small change
Compare the first two versions at the same width with only two cards, then fill all tracks or try a very narrow container.
Code to notice
.layout {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}
.item {
min-width: 0;
overflow-wrap: anywhere;
padding: 8px;
}Live result
What changed: Unused tracks collapse, leaving two occupied tracks of about 298px each.
A common wrong turn
Comparing different widths or fully occupied rows can hide the auto-fit/auto-fill distinction. Keep width, gaps, minimums, and item count controlled while comparing. A responsive track does not excuse an oversized fixed-width image inside it.
Try it in your own project
Copy the example into your local HTML and CSS files. Predict one change before saving and refreshing the browser. Use the interactive versions above to check your prediction, then explain which container, item, or track changed. The related playground offers extra practice with its supported controls; use your local files for properties it does not expose.
Your turn: compare empty tracks in auto-fit and auto-fill
Build a two-card responsive grid, compare empty tracks fairly, and keep it usable below the preferred card width.
Optional exploration
Use the playground to explore the controls and generated code. It is an open experiment, so it does not check your answer.
- Use two cards and compare auto-fit with auto-fill at the same 640px preview width. Explain why the cards have different widths.
- Add two more cards without changing the width. Predict why the two modes now produce the same four occupied tracks.
- Use min(100%, 140px) inside minmax and test a 118px container. Keep text wrapping enabled. This task belongs in your local CSS; the linked playground demonstrates explicit tracks rather than auto-fit.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.