<分区>
我有一个基本的网格设置如下:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
grid-gap: 1rem;
}
当网格自动分成新行时，我要么希望新行上的元素占用一定比例的空间，要么居中以便它们看起来不错。
例如，如果我在一行中有 3 个元素，那么我希望每个元素占据 33% 的容器空间。但是当网格断开并且新行上只有 1 个元素时，我希望该元素占据行宽的 100%，或者至少看起来居中——这与将元素全部放置的默认行为相反向左走，只占用 1fr 的空间。
类似地，如果新行上有 2 个元素，则每个元素应占据行空间的 50%，或者两者一起看起来应该居中。
不知道总共会有多少个元素。理想情况下，该解决方案应适用于最少 1 到任意数量的元素。
如果有人有任何想法，请告诉我。谢谢。
最佳答案
这是 flexbox 的工作，我认为用 CSS 网格不容易实现:
.grid-container {
display: flex;
flex-wrap:wrap;
border:1px solid;
margin:2px;
}
.grid-container>div {
height: 50px;
background: red;
margin: .5rem;
flex: 1 1 calc(33% - 1rem);
}<div class="grid-container">
<div></div>
<div></div>
<div></div>
</div>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>如果你想让元素居中，只需这样做:
.grid-container {
display: flex;
flex-wrap:wrap;
border:1px solid;
margin:2px;
justify-content:center;
}
.grid-container>div {
height: 50px;
background: red;
margin: .5rem;
flex: 0 1 calc(33% - 1rem); /*disable the flex-grow*/
}<div class="grid-container">
<div></div>
<div></div>
<div></div>
</div>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>关于html - CSS 网格列拉伸(stretch)以填充整行/或在行中居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52750121/