Build a layout that adapts
Use CSS Grid, minmax(), and gap to make a resource layout respond to available space, then recover the exact saved practice after sign-in.
Start with the idea01
Layout describes a relationship, not a screen size.
A responsive layout keeps its meaning as space changes. Instead of choosing a fixed number of columns, describe the smallest useful card and let the browser decide how many fit.
.resource-grid {
display: grid;
}02
Give every column a safe minimum and a flexible maximum.
minmax(14rem, 1fr) protects readability at the narrow end and shares spare space at the wide end. 1fr means one fraction of the available row.
.resource-grid {
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}The browser adds or removes tracks as the container changes. The layout responds to its actual space without a device list.
03
Use gap for the relationship between cards.
A grid gap belongs to the container, so every row and column uses one spacing rule. min-width: 0 lets long card content shrink instead of forcing the track wider.
.resource-grid {
gap: 1rem;
}
.resource-card {
min-width: 0;
}Five-minute practice
Make three cards adapt without a breakpoint.
Finish the saved CSS below. Resize the page and watch the same rule move from one column to several without hiding content.
Saved practice · Responsive CSS Grid
Make one resource grid adapt.
Finish the track rule, add one shared gap, and keep long card content inside its column. The preview updates as you type.
Practice checks
Four layout choices, checked on the server.
Keep display: grid inside .resource-grid.
Use repeat() with auto-fit or auto-fill and minmax() in grid-template-columns.
Add a non-zero gap to .resource-grid.
Keep min-width: 0 inside .resource-card.
Starter CSS is ready. Save when the cards adapt cleanly.
Active recall
Check your mental model.
Answer from memory. You can choose all four answers before deciding whether to check them.