CSS网格换行
CSS网格换行
提问于 2017-03-31 06:22:00
有没有可能在不使用媒体查询的情况下制作CSS网格环绕？
在我的例子中，我想要放在网格中的项的数量是不确定的，并且我想要该网格换行。使用Flexbox，我不能可靠地很好地间隔东西。我也想避免一堆媒体的询问。
.grid {
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
grid-template-columns: 186px 186px 186px 186px;
}
.grid > * {
background-color: green;
height: 200px;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
这是一张GIF图片：
作为附注，如果有人能告诉我如何避免指定所有项目的宽度，就像我使用grid-template-columns一样，那就太好了。我希望孩子们指定他们自己的宽度。
回答 3
Stack Overflow用户
发布于 2017-03-31 07:52:44
您希望在repeat()函数中使用auto-fit或auto-fill：
grid-template-columns: repeat(auto-fit, 186px);如果您还使用minmax()来允许灵活的列大小，那么两者之间的区别就会变得很明显：
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));这允许列的大小灵活变化，从186个像素到横跨整个容器宽度的等宽列。auto-fill将根据宽度创建尽可能多的列。比方说，如果有五列，即使您只有四个网格项，也会有第五个空列：
相反，使用auto-fit可以防止空列，如果需要，可以进一步扩展您的列：
Stack Overflow用户
发布于 2017-03-31 06:37:02
您可能正在寻找auto-fill
grid-template-columns: repeat(auto-fill, 186px);演示：http://codepen.io/alanbuchanan/pen/wJRMox
为了更有效地使用可用空间，您可以使用minmax，并将auto作为第二个参数传入：
grid-template-columns: repeat(auto-fill, minmax(186px, auto));演示：http://codepen.io/alanbuchanan/pen/jBXWLR
如果您不想要空列，可以使用auto-fit而不是auto-fill。
Stack Overflow用户
发布于 2019-03-28 23:54:10
我也遇到过类似的情况。在您所做的工作之上，我想要在容器中居中我的列，同时不允许空列位于左侧或右侧：
.grid {
display: grid;
grid-gap: 10px;
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43129360
复制相关文章
相似问题
腾讯云开发者
