Is using auto-fit or autofill the best way to make responsive CSS grids



I notice there are two option to use such as auto-fit and auto-fill. My understanding is autofit let's the browser handle the column sizing and wraps it as a row if there is an overflow. If so when do we need to use auto-fill if auto-fit is more ideal for responsive css grids.


Hi htran7228,

Rachel Andrew has a nice grid example site with a page that explains the differences.
auto-fill vs. auto-fit

In the event of an overflow auto-fill will wrap to a new line too.

According to the specs...

The auto-fit keyword behaves the same as auto-fill, except that after grid item placement any empty repeated tracks are collapsed. An empty track is one with no in-flow grid items placed into or spanning across it. (This can result in all tracks being collapsed, if they’re all empty.)

So there is the main difference between them, auto-fit collapses empty tracks and redistributes the remaining space. As seen in the Rachel's example page.

Use auto-fit when you want it to fill remaining space. :slight_smile:


That cleared up some confusion so auto fit is if you want to fill up the remaining space. Thanks.


You can check out some responsive grid examples here:

closed #5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.