CSS Grid - 列换行完全填满最后一行

Question

我有几列的 CSS 网格。最小列宽为 100 像素。然后我想换行，但是换行后我想在最后一行中的列与其余行中的列一样多。例如，我不想在第一行设置 3 个单元格，在最后一行设置 1 个单元格。

我不想展开最后一行单元格，而是将更多单元格移到最后一行并展开所有单元格

.grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(100px, 1fr))
    }
 
 .element {
 height: 50px;
 border: 2px solid red;
 }

<div class="grid">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Answer 1

你可以使用弹性盒子来代替

<div class="flex">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element element-100"></div>
</div>

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.element {
  flex: 1 0 100px;
  height: 50px;
}
.element-100 {
  flex: 0 0 100%;
}