如何使最后一行中的项目占用CSS网格中的剩余空间？

有没有办法强制网格最后一行中的所有项目填充该行，不管它们有多少

我不知道网格中的项目数量，因此无法直接将它们作为目标。我试着使用

网格自动流：dense

，但它并没有真正的帮助

这是我的问题： :

div{
保证金：20px自动；
宽度：400px；
背景#d8d8d8；
显示：网格；
栅隙：10px；
网格模板列：重复（3，1fr）；
}
跨度{
高度：50px；
背景：蓝色；
}

---

我不认为CSS网格是您试图构建的布局的最佳选择，至少如果它是动态的，并且您不知道容器上始终有多少项，那么CSS网格就不是最佳选择。Flexbox实际上更适合一维布局；要使所有的东西都保持完全相同的大小并完全按照您的需要使用所有可用的空间可能会有点困难，但最终这种类型的箱子才是Flexbox构建的目的

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

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

.container{
显示器：flex；
柔性包装：包装；
框大小：边框框；
}
.弹性项目{
宽度：30%；
边框：1px实心#000；
柔性生长：1；
最小高度：120px；
框大小：边框框；
利润率：0.5px10px；
证明内容：之间的空间；
文本对齐：居中；
}

1.
2.
3.
4.
5.
6.
7.

这在中是不可能的。但是，flexbox并不太复杂

你在评论中写道：

我使用Flexbox作为后备。我研究网格的一个（并非唯一）原因是使用“gap”和它附带的其他特性。例如，尽管可以通过边距模拟间隙，但由于我们不知道最后一行中的项目数，因此消除侧间隙（在容器一侧）将需要额外的代码

你说得对：CSS网格中的

夹点间隙

功能非常方便。但是，您也可以在flexbox中使用边距模拟该行为，而不需要太复杂

div{
显示器：flex；
柔性包装：包装；
填充：0px 0px 5px 5px；
保证金：20px自动；
宽度：400px；
背景#d8d8d8；
}
跨度{
弹性：1030%；
高度：50px；
边缘顶部：5px；
右边距：5px；
背景：蓝色；
}

---

通过组合CSS规则第n个子项和第n个最后一个类型，这在CSS网格中是完全可能的。唯一需要注意的是，需要提前知道列的数量

.grid{
显示：网格；
网格模板列：自动；
证明项目：开始；
栅隙：10px；
}
.grid分区{
边框：1px实心#ccc；
宽度：100%；
}
.grid>*：第n个子项（3n-1）{
自我辩护：中心；
文本对齐：居中；
}
.grid>*：第n个子项（3n）{
自我辩护：结束；
文本对齐：右对齐；
}
.grid>*：第n个子项（3n-1）：类型（1）的第n个最后一个{
边框颜色：红色；
格构柱：跨度2；
}
.grid>*：第n个子项（3n-2）：类型（1）的第n个最后一个{
边框颜色：红色；
格构柱：跨度3；
}

文本
正文
文本
文本
正文
文本
文本
正文

我找到了你问题的答案，我在这里复制了它：

为了减少css的复杂性并解决这个复杂的问题，建议使用SCSS*而不是普通css

在SCSS文件中，您必须使用css选择器n:last child，并根据模函数和3列的常量因子迭代计算child

@mixin setLastChildFluid{
  @for $i from 1 through 10 {    
    $span: 3;
    @if $i % 3 == 0{
      $span: 1;
    } @else if $i % 3 == 1{
      $span: 3;
    } @else if $i % 3 == 2{
      $span: 2;
    } 
    @if $span == 2 {
      span:nth-child(#{$i - 1}){
        &:nth-last-child(2){
          grid-column-end:span 1;
          position:relative;
          bottom:0;
          width:calc(150% + 5px);
          left:0;    
        }
      }
      span:nth-child(#{$i}){
        &:nth-last-child(1){
          grid-column-start:2;
          position:relative;
          bottom:0;
          width:calc(150% + 5px);
          left:calc(50% + 5px);
        }
      }
      
    } @else {
      span:nth-child(#{$i}){
        &:last-child{
            grid-column-end:span #{$span};          
        }
      }
    }
    
  }
}
div {
  position:relative;
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  
  @include setLastChildFluid;
}
span {
  height: 50px;
  background: blue;
  color:yellow;
}

以及以下html标记；我已经完成了两个不同的示例（由div包装）来重现您的查询：

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
</div>
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

1.
2.
3.
4.
5.
6.
7.
8.
1.
2.
3.
4.
5.
6.
7.

更改div数以查看流体结果

---

*SASS是一种预处理器脚本语言，它被解释或编译为级联样式表（CSS）。在这里了解更多信息：

@IvanS95哦，对不起！我的坏：）然后他必须正确使用表@Ahtisham也不会推荐用户表，使用Flexbox可以更好地完成此特定布局，因为OP可以使最后一项使用剩余项space@IvanS95创建两个div怎么样。保持第一个div的宽度固定，然后保持动态。☺️@阿赫蒂沙姆：这可能比使用flexbox还要麻烦。我建议您使用flexbox。谢谢您的回答。我使用Flexbox作为后备。我研究网格的一个（并非唯一）原因是使用“gap”和它附带的其他特性。例如，即使间隙可以通过边距来模拟，但由于我们不知道最后一行中的项目数，因此消除侧面间隙（在容器的侧面）将需要额外的代码。@Ogdila没问题！不幸的是，现在看来这是不可能的；事实上，我刚刚发现了另一个问题，同样的问题，看起来CSS网格无法根据规格实现这一点，你可以说，例如

gap:0.25rem

也可以使用Flexbox。不幸的是，只有Firefox和最近的Chrome才对此有适当的支持。Safari（2021年第1季度）仍然无法支持这一点：@MikkoRantalainen这很酷，希望它能得到更广泛的采用，这对像这样的设计会有很大帮助谢谢你的回答。只有当我们知道每行有3列时，您的解决方案才有效，如果我们有6列，那么我们必须以第n个子项（6n-5）为目标定义跨度5次，以此类推。是的，如上所述，但当您知道列数时，它完全有效，所以我相信这是你问题的答案。如果列数不同，比如使用媒体时，你也可以使用SCS计算这些条目