Working out the auto-fit column count up front
Laying cards out with repeat(auto-fit, minmax(...)) lets the browser decide how many columns appear, which is convenient until you need the number before you can see it. Enter the container width, the minimum card width, the gap and any horizontal padding, and this page applies the same arithmetic the browser uses: how many columns fit, how wide each card actually ends up, and how much room is left over if the cards stay at their minimum width. List several widths and you can see exactly where the column count changes.
The formula is columns = floor((content width + gap) / (minimum card width + gap)), with a floor of one column. Content width is the container width minus the total horizontal padding. Actual card width is (content width - total gaps) / columns, which assumes every track is an equal 1fr. The rounding down happens once, at the end, with a small tolerance so floating point noise cannot inflate the count. Values show two decimals, checked against the W3C CSS Grid specification in October 2026.
The page returns column counts and leftover space only. It does not work backwards to column widths and gutters for a twelve column system, and it does not claim a number of cards that looks best. auto-fill keeps empty tracks and can therefore report a different count, so everything here follows auto-fit. Card padding and height changes driven by text length are not supported.
Frequently Asked Questions
No. auto-fill keeps empty tracks in the grid, so the number of visible columns can differ from this calculation. Everything on this page follows auto-fit.
It means the cards at their minimum width fill the container exactly, with nothing to spare. In that case the actual card width equals the minimum width you entered.
The count stays at one column and a separate note says how many pixels short the content area is. A real browser behaves the same way: one column, with the card narrower than your minimum.