有没有办法强制网格的最后一行中的所有项目填充行,无论它们有多少？
我不知道网格中的项目数量,因此我无法直接定位它们.我尝试使用网格自动流：密集,但它并没有真正帮助.
这是我的问题可视化： 
div {
margin:20px auto;
width: 400px;
background: #d8d8d8;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3,1fr);
}
span {
height: 50px;
background: blue;
}最佳答案
我不认为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;
}
