30

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
jfox
  • 848
  • 1
  • 8
  • 23

3 Answers3

63

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));

enter image description here

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

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

enter image description here

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 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? – carinlynchin Oct 27 '17 at 18:28
  • @carinlynchin, see this post: [Prevent content from expanding grid items](https://stackoverflow.com/q/43311943/3597276) – Michael Benjamin Oct 27 '17 at 19:06
  • 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.](https://www.w3.org/TR/css3-grid-layout/#repeat-syntax)* @TricksfortheWeb – Michael Benjamin Jan 14 '18 at 19:33
  • Right, I changed it to use `minmax` and now it's working. – yaakov Jan 14 '18 at 19:34
3

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

Miraj
  • 59
  • 6
0

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.

Tanisha Shrivastava
  • 11
  • 2