How can I make grid columns share space but keep a minimum width?

Use minmax() for each column’s size range, and 1fr as its flexible maximum. For a responsive set of equal-width columns, put that range inside repeat(auto-fill, ...):

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

Here, 200px is the minimum track size. The 1fr maximum shares remaining space, and auto-fill fits as many tracks as the container can hold at that minimum. The column count can therefore change as the container changes width, without media-query breakpoints. [S1][S2]

Treat the minimum as a content and design choice, not a universal number. Start with the narrowest card that still gives its real contents room to work: consider the longest likely heading, whether buttons or images need space, and how the text wraps. Then preview the layout at the widths your page needs to support and adjust the minimum.

For example, 200px is just a starting value in the CSS pattern, not a guarantee that every card will fit well. If your content needs a wider card, try a larger minimum; if a narrower card remains readable and usable in your design, try a smaller one. The number of columns depends on the container’s available space and the gap, so check the grid in its actual parent rather than choosing a value from the viewport width alone. [S1]

The pattern asks Grid to fit as many tracks as it can at the specified minimum. As available space decreases, fewer tracks may fit; 1fr distributes the remaining space among the tracks. The column count can change as the container changes width. [S1][S2]

Think of the minimum as the requested lower bound for each track, not an absolute guarantee that no layout can overflow. Other layout constraints or content can still affect the result. [S2] If you see unwanted overflow, inspect the actual container width, the gap, and the content before lowering the minimum automatically.

Suppose, purely as an example, the cards look acceptable at a minimum track size of 240px, and you want a 16px gap. You could write:

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

Change those values to suit your design. Check the grid inside its real parent at a narrow, intermediate, and wide container size. Confirm that cards have enough room for their contents, that the number of columns changes as intended, and that the gap does not leave an awkward amount of space. This example illustrates the pattern; it does not predict an exact column count for your page, because that depends on available container space and gaps. [S1]

A reusable starting point is: set minmax([your minimum], 1fr), use repeat(auto-fill, ...), and tune the minimum after checking the actual content and container.