{"id":6567,"date":"2025-08-06T10:08:24","date_gmt":"2025-08-06T15:08:24","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6567"},"modified":"2025-08-12T10:48:52","modified_gmt":"2025-08-12T15:48:52","slug":"count-auto-fill-columns","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/count-auto-fill-columns\/","title":{"rendered":"Get the number of auto-fit\/auto-fill columns in CSS"},"content":{"rendered":"\n

<\/a>Ever wanted to get the number of auto-fit<\/code>\/auto-fill<\/code> columns in a grid? For example, because you want to highlight just the items in the first or last row or column? Do something special just for even or for odd rows or columns (e.g. zebra striping)? Or for any one specific row or column? Create responsive non-rectangular grids? And all of this with zero breakpoints?<\/p>\n\n\n\n

This is all doable with pure CSS by using container query units, CSS variables, and CSS mathematical functions! Of course, it also involves navigating browser bugs and support gaps. But at the end of the day, it is possible to do it cross-browser!<\/p>\n\n\n\n

Let’s see how!<\/p>\n\n\n\n

The Basic Idea<\/h2>\n\n\n\n

Setup<\/h3>\n\n\n\n

We start with a .grid<\/code> with a lot of items, let’s say 100<\/code>. I normally prefer to generate them in a loop using a preprocessor to avoid clutter in the HTML and to make it easy to change their number, but it’s also possible to do so using Emmet. For the demos illustrating the concept here, we’re using Pug<\/a>, and also numbering our items via their text content:<\/p>\n\n\n\n

.grid
  - for(let i = 0; i < 100; i++)
    .item #{i + 1}<\/pre>\n\n\n\n
Our .grid<\/code> has auto-fit<\/code> columns:<\/p>\n\n\n
.grid<\/span> {\n  --u<\/span>: 7em<\/span>;\n\n  display<\/span>: grid;\n  grid-template-columns<\/span>: repeat<\/span>(auto-fit, var(--u));\n  container-type<\/span>: inline-size\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
This means our .grid<\/code> has as many columns of unit width u<\/code> as can fit within its own content-box<\/code> width. This width is flexible and is given by the page layout, we don’t know it. However, its children (the .item<\/code> elements) can know it as 100cqw<\/code> in container query units. To have these container units available for the .grid<\/code> element’s children (and pseudos), we’ve made the .grid<\/code> an inline container.<\/p>\n\n\n\n
We have two options in this case.<\/p>\n\n\n\n
The first would be to replace auto-fit<\/code> with auto-fill<\/code>. When we have as many items as we do in this case, we can use either of them, the difference between them is only noticeable when we don’t even have enough items to fill one row<\/a>.<\/p>\n\n\n
.grid<\/span> {\n  --u<\/span>: 7em<\/span>;\n\n  display<\/span>: grid;\n  grid-template-columns<\/span>: repeat<\/span>(auto-fill, var(--u));\n  container-type<\/span>: inline-size\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The second would be to put the .grid<\/code> inside a wrapper .wrap<\/code> element and move the container<\/code> property on the wrapper.<\/p>\n\n\n
.wrap<\/span> { container-type<\/span>: inline-size }\n\n.grid<\/span> {\n  --u<\/span>: 7em<\/span>;\n\n  display<\/span>: grid;\n  grid-template-columns<\/span>: repeat<\/span>(auto-fit, var(--u))\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
We’re going for the first option here.<\/p>\n\n\n\n
Now we’re getting to the interesting part!<\/p>\n\n\n\n
Getting the number of columns<\/h3>\n\n\n\n
In theory, we could get the number n<\/code> of columns on the .item<\/code> children of the .grid<\/code> via division, whose result we round down (if the container width of 100cqw<\/code> is 2.23 times the unit width u<\/code> of a column, then we round down this ratio to get the number of columns we can fit, which is 2 in this case):<\/p>\n\n\n
--n<\/span>: round<\/span>(down<\/span>, 100cqw<\/span>\/var<\/span>(--u<\/span>))<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
.grid<\/span>::before<\/span> {\n  --n<\/span>: round<\/span>(down, 100<\/span>cqw\/var(--u));\n\n  counter-reset<\/span>: n var<\/span>(--n);\n  content<\/span>: counter<\/span>(n)\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
We’ve wrapped this inside a @supports<\/code> block so we have a message that lets us know about this failing in non-supporting browsers (basically Firefox), where we see the following:<\/p>\n\n\n\n
\"base_idea_fallback\"
the result in non-supporting browsers: no number of columns can be computed<\/figcaption><\/figure>\n\n\n\n
In Safari and Chrome, things look like in the recording below:<\/p>\n\n\n\n\t\t
\n\t\t\t
 
In practice, while this should<\/em> work, it only works in Safari (since Sept 2024<\/a>) and in Chrome (since June 2025<\/a>), where we can test it out by displaying it using the counter hack<\/a>:<\/p>\n\n\n
This should<\/em> work just fine. And it does, in both Chrome and Firefox. However, if we try it out in Safari, we see our .grid<\/code> is collapsed into a point. Unfortunately, in Safari, auto-fit<\/code> grids break if they are also containers. (Note: this Safari bug is actually fixed<\/a>, it’s just waiting to make its way to a stable release.)<\/p>\n\n\n\n