如何使最后一行中的项目消耗CSS Grid中的剩余空间？

Question

有没有办法强制网格的最后一行中的所有项目填充行,无论它们有多少？

我不知道网格中的项目数量,因此我无法直接定位它们.我试图使用grid-auto-flow: dense,但它并没有真正帮助.

这是我的问题可视化: :

div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>
 

Answer 1

我不认为 CSS Grid 是您尝试构建的布局的最佳选择，至少如果它是动态的并且您并不真正知道容器上将有多少项一直存在，则不是。Flexbox 实际上更适合一维布局；让所有东西保持完全相同的大小并完全按照您的需要使用所有可用空间可能会有点困难，但最终这种类型的情况是 Flexbox 的目的。

当然，您也可以通过对 CSS 进行少量计算来使用 100% 宽度。

CSS Grid 可能更好地保持行和列对齐，但这是另一种情况。

.container {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.flex-item {
  width: 30%;
  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="container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
</div>

Answer 2

通过结合 CSS 规则 nth-child 和 nth-last-of-type，这完全可以通过 CSS 网格实现。唯一需要注意的是，需要提前知道列数。

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: start;
    grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}

<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>

Answer 3

对于那些只为最后一个元素寻找答案的人，您可以尝试grid-column: 1 / -1;或者col-span-full如果您使用的是 tailwindcss。

div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}
div > span:last-of-type {
  grid-column: 1 / -1;
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>