OnlineCBT
Let the grid choose how many columns fit
Combining repeat, auto-fit or auto-fill, and minmax creates responsive card layouts without hard-coding every column count. The minimum is a design constraint; choose it from the card's real content, not from a favorite device width.
.catalogue {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
}
.card { min-width: 0; overflow-wrap: anywhere; }The grid fits as many approximately 16rem minimum columns as available space permits, while min(100%,16rem) keeps the minimum from exceeding a very narrow container. Flexible maxima share leftover space.
auto-fit versus auto-fill
Both calculate how many repeated tracks fit. auto-fill can retain empty tracks in that repeated structure. auto-fit collapses empty repeated tracks after placement so occupied tracks can use the freed space. The visible difference is easiest to see with a wide container and only one or two cards.
minmax constraints
The first argument is a minimum track size and the second a maximum. A flexible fr value belongs in the maximum position, not as the minimum in this pattern. Content can still overflow a track if a child has an oversized fixed width or an unbreakable token.
Test content, not only empty boxes
Use cards with a long title, a multi-line description and controls. Check that the action remains reachable and the image does not stretch unexpectedly. Set an image's width and aspect ratio deliberately, and decide whether object-fit:cover cropping is acceptable.
Practice
- Render one, two and seven cards and resize the container.
- Switch auto-fit to auto-fill and compare unused columns.
- Test a 250px-wide container, ensuring the minimum does not force horizontal scrolling.
- Explain why a responsive grid does not remove the need to test typography, focus order and content overflow.
