Wrapping Css Grid And Streching One Grid Item To Take Up All Empty Columns

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 el

Solution 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>