2

I'm trying to make the last grid item fill all empty columns in a css grid that has auto-fit for wrapping items.

I've read Expand a div to fill the remaining width and Make last element take remaining width with wrapping (and with IE9 support), but they don't answer the case of the dynamically wrapping grid that is here the important part since they are made for float and display: block.

So for example if the grid-item is wrapped in a new line i want it to stretch for taking all the empty space.

If you look at the code then the div number 7 should always take all the empty space in the row. I've managed to hack something which dosen't seem robust enough, using 100vw is there a better way?

For the following example: resize the window to see the items wrap into the next lines:

* {
  box-sizing: border-box;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-element {
  background-color: deepPink;
  padding: 20px;
  color: #fff;
  border: 1px solid #fff;
}

.grid-element:last-of-type {
  /*width: 100vw;*/ /* Is there a better way? */
}

body {
  padding: 2em;
}

hr {
  margin: 80px;
}
<div class="grid-container">
  <div class="grid-element">
    1
  </div>
  <div class="grid-element">
    2
  </div>
  <div class="grid-element">
    3
  </div>
  <div class="grid-element">
    4
  </div>
  <div class="grid-element">
    5
  </div>
  <div class="grid-element">
    6
  </div>
  <div class="grid-element">
    7
  </div>
</div>
biberman
  • 5,606
  • 4
  • 11
  • 35
docHoliday
  • 241
  • 3
  • 15

1 Answers1

-1

It can be achieved with display: flex. In addition, it is necessary to use flex-grow property.

As mdn says about flex-grow:

The flex-grow CSS property sets the flex grow factor of a flex item's main size

* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-element {
  width: 10%;
  border: 1px solid #000;
  flex-grow: 1;
  min-height: 120px;
  box-sizing: border-box;
  margin: 0 5px 10px;
  justify-content: space-between;
  text-align: center;
}
<div class="flex-container">
    <div class="flex-element">
      1
    </div>
    <div class="flex-element">
      2
    </div>
    <div class="flex-element">
      3
    </div>
    <div class="flex-element">
      4
    </div>
    <div class="flex-element">
      5
    </div>
    <div class="flex-element">
      6
    </div>
    <div class="flex-element">
      7
    </div>
  </div>
StepUp
  • 36,391
  • 15
  • 88
  • 148
  • This answers not the question since the OP wanted auto-fit for wrapping items. – biberman Apr 22 '21 at 19:59
  • @biberman it autofits to the container. Author can set desirable `width` and it will autofit to container. – StepUp Apr 22 '21 at 20:02
  • But it doesn't wrap like the reproducable example in the question. @StepUp try it: open it in full page mode and resize the window... – biberman Apr 22 '21 at 20:05
  • @biberman I just edited width and it looks like it wraps, please, see my updated answer – StepUp Apr 22 '21 at 20:11
  • Aw: @StepUp yes, you are right but all items in your last row grow and not just div number 7... – biberman Apr 22 '21 at 20:14
  • @biberman try to play with resizing in your browser and it can be seen that the last item can take the full row – StepUp Apr 22 '21 at 20:36
  • I did and did again after your comment - it's still the same: when you shrink the window so that div number 6 comes to the second line both last divs stretch - please try again... – biberman Apr 22 '21 at 20:41