如果模板是为列和行设置的，如何让CSS网格自动换行？
如果模板是为列和行设置的，如何让CSS网格自动换行？
提问于 2018-07-07 05:57:46
我的.wrapper元素中有12个子div，我希望将它们堆叠在一起。数字12实际上是动态的，所以我不知道我会有多少个孩子。现在，我的网格布局如下所示：
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
grid-auto-flow: column dense;
grid-gap: 10px;
}这是很好的，直到网格应该开始包装元素(布局是完整的，网格是3x2，其中包含6个元素)。第七个，第八个和所有其他的都堆叠在前六个旁边，尽管我希望它们在同一个模板的新行中(所以基本上我的网格将变成2x(3x2))。
解释本身可能没有太多意义，也可以查看Codepen。
如何使第六个元素之后的元素换行？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-07 17:42:16
您可以使用自动流来形成网格(就像@vals的答案所建议的那样)，然后通过一组:nth-child()规则设置网格的填充顺序：
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense;
grid-gap: 10px;
}
.wrapper > :nth-child(6n + 1),
.wrapper > :nth-child(6n + 2) {
grid-column: 1;
}
.wrapper > :nth-child(6n + 3),
.wrapper > :nth-child(6n + 4) {
grid-column: 2;
}
.wrapper > :nth-child(6n + 5),
.wrapper > :nth-child(6n + 6) {
grid-column: 3;
}<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
<div>Ten</div>
<div>Eleven</div>
<div>Twelve</div>
<div>Thirteen</div>
<div>Fourteen</div>
<div>And so on</div>
</div>
Stack Overflow用户
发布于 2018-07-07 15:57:21
使用grid-auto-flow: row。然后，您需要为第2项和第4项设置特殊规则，只需设置行就足够了。
我已经删除了grid-templated-rows: auto属性，它是默认属性，如果您以这种方式定位元素，则不需要它。
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense;
grid-gap: 10px;
}
.wrapper div:nth-child(-2n + 4) {
grid-row: 2;
background-color: yellow;
}<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
<div>Ten</div>
<div>Eleven</div>
<div>Twelve</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51218095
复制相关文章
相似问题