CSS Grid Auto-Fit & Auto-Fill Generator — repeat(auto-fit, minmax)

Min item width 200px

Max item width

Items 6

Gap (px) 16px

Item height (px) 80px

collapses empty tracks

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

keeps empty tracks

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

With fewer items than columns, auto-fit collapses empty tracks to 0 and stretches remaining items to fill the full container width.

Use when you want items to always fill the row, even with few items.

With fewer items than columns, auto-fill keeps empty tracks at their minimum width — items stay at their natural size.

Use when you want a fixed column rhythm regardless of item count.

auto-fit CSS

auto-fill CSS