What is the difference between auto-fill and auto-fit?

Question

I'm working with CSS grids to achieve a card grid layout.

But I don't quite know how to tweak the minmax() statement to handle use cases where there aren't enough items to fill a row but still need them to look like cards!

If I replace the max 1fr value with a static 100px or I use a fractional 0.25fr it upsets the scaling at smaller media sizes.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-column-gap: 17px;
  grid-row-gap: 25.5px;
  padding-bottom: 25.5px;
}
.card {
  background-color: #000;
  height: 100px;
}

<div class="wrapper">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

And then if there are only a couple items

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-column-gap: 17px;
  grid-row-gap: 25.5px;
  padding-bottom: 25.5px;
}
.card {
  background-color: #000;
  height: 100px;
}

<div class="wrapper">
  <div class="card"></div>
  <div class="card"></div>
</div>

Pachston

Answer 1

The key is to use auto-fill instead of auto-fit.

---

When the repeat() function is set to auto-fit or auto-fill, the grid container creates as many grid tracks (columns/rows) as possible without overflowing the container.

Note that as the grid container is being rendered, the presence of grid items is irrelevant. The container just lays out the columns and rows as instructed, creating grid cells. It doesn't care if the cells are occupied or unoccupied.

With auto-fit, when there are not enough grid items to fill the number of tracks created, those empty tracks are collapsed.

Taking your code as an example, when there aren't enough grid items to fill all the columns in the row, those empty columns are collapsed. The space that was used by the empty columns becomes free space, which is then evenly distributed among existing items. By absorbing the free space, the items grow to fill the entire row.

With auto-fill, everything is the same as auto-fit, except empty tracks are not collapsed. They are preserved. Basically, the grid layout remains fixed, with or without items.

That's the only difference between auto-fill and auto-fit.

Here's an illustration of three grid items with auto-fill:

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

Here's an illustration of three grid items with auto-fit:

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

spec reference: https://www.w3.org/TR/css3-grid-layout/#auto-repeat

Novelette

I've been trumped on making the last row grow to the end of the container and nothing more... but without a fixed height... but the contents keep making it grow outside the grid... any tips? – Cham

@carinlynchin, see this post: Prevent content from expanding grid items – Novelette

That's a valid error. You cannot use fr units with the auto-fill and auto-fit functions. From the spec: 7.2.2.1 Syntax of repeat(): Automatic repetitions cannot be combined with intrinsic or flexible sizes. @TricksfortheWeb – Novelette

Right, I changed it to use minmax and now it's working. – Polychrome

Answer 2

In Short, Auto-fit: Fit entire length of container. Auto-fill: Doesn't fit entire length of the contaier.

Spermiogenesis

Answer 3

When using minmax() function, the auto-fit keyword will expand the grid items to fill the available space. While auto-fill will keep the available space reserved without altering the grid items width.

Sidonnie