Dublin Library

The Publishing Project

The difference between auto-fill and auto-fit in grid layouts

  • 2 min. read

 

Even after all these years, I've struggled to understand the difference between auto-fill and auto-fit values when used in creating grid layouts.

The easiest way to create a grid of equal columns is to use the repeat function:

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

But this may cause each column to be smaller than we'd like it to be, especially on phones and other small form factor devices.

To prevent this, we use the minmax function. Similar in intent to clamp, this function defines a size that is greater than or equal to the min value and less than or equal to the max.

In the example below, we make the columns that are 1fr but no smaller than 200 pixels.

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(200px, 1fr));
}

But this is still not an ideal solution since this will cause overflow in the row. The columns will not wrap into new rows if the viewport width is too narrow, because we’re explicitly telling the browser to repeat the columns 12 times per row.

That's where auto-fill and auto-fit come into play. Both will populate the row of content.

The difference between the two is rather hard to understand and it has to deal with how they handle available space before the row wraps around.

According to Sara Soueidan:

auto-fill FILLS the row with as many columns as it can fit. So it creates implicit columns whenever a new column can fit, because it’s trying to FILL the row with as many columns as it can. The newly added columns can and may be empty, but they will still occupy a designated space in the row.

auto-fit FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space. The browser does that after FILLING that extra space with extra columns (as with auto-fill ) and then collapsing the empty ones.

The way I see it:

  • Use auto-fill when you need the content to take the full width of the available viewport
  • Use auto-fit when you want to keep the way content looks without expanding it to the width of the viewport

As usual, test to see which works best for your project.

Edit on Github