Define flexible tracks

Track sizes can mix fixed and flexible values:

.layout {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) 3fr;
}

repeat() avoids repeated values:

grid-template-columns: repeat(3, 1fr);

For a responsive card grid:

grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));

The grid creates as many tracks as fit. auto-fit collapses empty tracks so existing items expand. auto-fill keeps the empty tracks.

The inner min() prevents a 16rem minimum from overflowing a container narrower than 16rem.

Track minimums matter. A plain 1fr track has an automatic minimum that can honor min-content sizing. When a track must be allowed to shrink below a long child’s intrinsic minimum, use minmax(0, 1fr) and handle wrapping or overflow on the child.

Use a definite minimum only when the component truly cannot be useful below it. repeat(auto-fit, minmax(16rem, 1fr)) will overflow a container narrower than 16rem; the min(16rem, 100%) safeguard makes that constraint responsive.

In the Grid inspector, compare auto-fit and auto-fill with fewer items than available columns. Then add a long URL and compare 1fr with minmax(0, 1fr). The track overlay shows whether the constraint comes from the grid or its content.