auto-fit is a repeat() keyword for responsive CSS Grid layouts. It calculates how many tracks fit in the container, then collapses unused tracks to 0px so occupied tracks can expand into the released space. section 4.4.4 section 4.6
The browser first estimates repetitions with floor((container width − total gaps) / track width). With flexible tracks such as minmax(200px, 1fr), the remaining space is distributed among the tracks that contain items. section 4.4.4
Two cards in an 850px grid
Use grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));. The layout can calculate four 200px-capable columns, but only two contain cards. auto-fit collapses the two empty columns, allowing the two cards to expand to 425px each. Replacing auto-fit with auto-fill preserves the empty columns and keeps the card widths at 212.5px.
Choose the keyword according to how empty space should behave:
- Use auto-fit when occupied tracks should grow after unused tracks collapse. section 4.4.4
- Use auto-fill when calculated tracks should remain even without content. section 4.6
