Building a Flexible Grid with repeat() and minmax()

In this lesson you'll learn how to build a flexible grid combining repeat() and minmax(), so you can achieve a layout that automatically adjusts to screen width. This is for people searching "CSS Grid auto-fill minmax."

The combination repeat(auto-fill, minmax(minimum, 1fr)) in CSS Grid is a very practical technique that automatically increases or decreases the number of columns to "however many fit," based on screen width. This is commonly used for a card-listing layout.

The sample code specifies grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));, keeping each column's width at a minimum of 100px while automatically adjusting the number of columns to whatever fits the screen width. Try changing the preview's width and watch the number of cards per row change.

A common beginner stumbling block is the difference between the similar values auto-fill and auto-fit. auto-fill keeps the column slots even when there are few elements, while auto-fit collapses leftover slots to match the number of elements — a subtle but important difference.

Without needing to precisely specify column counts with media queries, just this one line automatically arranges the right number of cards for the screen width. It's worth remembering as a classic pattern for building a responsive gallery or product listing.