Design Atlasgrid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) is the most common real-world use of the mechanism explained in the auto-fill-vs-auto-fit entry. minmax(140px, 1fr) means "each card is at least 140px, and whatever space is left gets shared evenly"; auto-fit works out on its own how many cards fit as the screen widens — no need to hand-write "3 columns at this width, 4 at that one" in a media query.
The minmax minimum is the actual design knob for a card grid. Raise it (say to 220px) and the same screen width fits fewer, bigger columns; lower it (say to 100px) and more columns pack in tighter. Replacing the maximum's 1fr with a fixed pixel value caps how wide a card is allowed to grow.
The pattern's limit is that it doesn't equalize card height on its own — cards in the same row do get stretched to match thanks to grid's default align-items: stretch, but wildly different content lengths can still look uneven. Line-clamp the text inside each card to a fixed number of lines, or switch to masonry entirely if the heights genuinely need to vary.
When to use
The near-default choice for content with a variable item count and roughly uniform card sizes — blog post lists, product listings, team member grids.