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

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

我不知道网格中的项目数量，因此无法直接将它们作为目标。我试着使用网格自动流：dense，但它并没有真正的帮助

这是我的问题：
:

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

&lt；部门&gt；
&lt；span&gt&lt/span&gt；
&lt；span&gt&lt/span&gt；
&lt；span&gt&lt/span&gt；
&lt；span&gt&lt/span&gt；
&lt；span&gt&lt/span&gt；
&lt；span&gt&lt/span&gt；
&lt；span&gt&lt/span&gt；
&lt/部门&gt；

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

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

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

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

&lt；div class=“container”&gt；
&lt；div class=“弹性项目”&gt；1&lt/部门&gt；
&lt；div class=“弹性项目”&gt；2&lt/部门&gt；
&lt；div class=“弹性项目”&gt；3&lt/部门&gt；
&lt；div class=“弹性项目”&gt；4&lt/部门&gt；
&lt；div class=“弹性项目”&gt；5&lt/部门&gt；
&lt；div class=“弹性项目”&gt；6&lt/部门&gt；
&lt；div class=“弹性项目”&gt；7&lt/部门&gt；
&lt/部门&gt




相关文章：

如何使浮动元素居中？
用于Firefox的自定义CSS滚动条
大纲对文本的影响
如何调整单个flexbox项（覆盖调整内容）[重复]

相关文章：

发表评论 取消回复

发表评论取消回复