How to get items to stretch to fill width?

Question

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 3px;
  border: 1px solid green;
}

.item {
  border: 1px solid red;
  height: 50px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

How can I stretch the red item boxes a little bit so that they fill the entire width of the green container box?

They should all be the same width, and a little bit bigger than 100px.

The last row should be left-aligned as it is now.

Michael Benjamin · Accepted Answer · 2017-12-20T00:41:00.737

You just need to add a fraction unit to the grid-template-columns rule.

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

This rule creates as many columns as will fit in the container.

The minimum width of each column is 100px.

The maximum width is 1fr, which means the column will consume any free space on the row.

Now all horizontal space in the container is being used.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 50px;
  grid-gap: 3px;
  border: 1px solid green;
}

.item {
  border: 1px solid red;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

These posts explain the solution above in more detail:

Is there a difference between `1fr` and `auto` in this context? It sounds like "auto" might make the column-widths uneven but that doesn't appear to be the case. — mpen, Dec 20 '17 at 00:43
The column widths are not uneven because the minimum width for each column is fixed at 100px, and *there is no content in the items*, which is the basis for `auto`. — Michael Benjamin, Dec 20 '17 at 00:47
Ah..okay. Thanks! In my real usage the content *does* differ but it wasn't redistributing, I guess because I have `overflow: hidden`? Anyway.. doesn't matter, this is perfect. Thanks again! — mpen, Dec 20 '17 at 00:55

How to get items to stretch to fill width?

1 Answers1