CSS repeat(), minmax(), and Auto-fit

Grid track functions reduce repeated CSS and help grids adapt to different available widths.

repeat(3, 1fr) means three equal fractional tracks. minmax(150px, 1fr) lets a track grow but not shrink below 150px. A practical adaptive pattern is repeat(auto-fit, minmax(min(100%, 160px), 1fr)), which prevents a 160px minimum from overflowing an even narrower container.

auto-fit collapses empty repeated tracks while auto-fill may preserve their space; the difference becomes clearer when there are fewer items than available columns.

Repeat generates tracks and minmax provides track-size constraints; auto-fit and auto-fill decide how many repeatable tracks exist.

Write one equal track value instead of repeating it three times.

HTML

<div class="repeat-grid"><div>Jan</div><div>Feb</div><div>Mar</div></div>

CSS

.repeat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 370px; }
.repeat-grid div { padding: 16px 5px; background: #dbeafe; text-align: center; border-radius: 7px; }

Rendered output

Observe: Three equal-width columns occupy the available horizontal space.

Add a track when enough width exists, without a breakpoint.

HTML

<div class="repeat-grid adaptive"><div>Design</div><div>Build</div><div>Ship</div><div>Measure</div></div>

CSS

.repeat-grid.adaptive { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 125px), 1fr)); gap: 9px; max-width: 430px; }
.repeat-grid.adaptive div { padding: 16px 9px; text-align: center; background: #ccfbf1; border-radius: 7px; }

Rendered output

Observe: Cards fill as many columns as fit at a minimum width of 125px, and remaining space is shared.

Repeat generates tracks and minmax provides track-size constraints; auto-fit and auto-fill decide how many repeatable tracks exist.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• minmax(180px,1fr) can overflow a container that is less than 180px wide; guard very narrow widths.
• auto-fit and auto-fill are similar but not identical when there are unoccupied tracks.

Try a 200px track minimum, then reduce the container width. Compare auto-fit to auto-fill with only two items.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use repeat and minmax for grids that scale smoothly with content and container width.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.