我有一个容器，其中包含未知数量的子级（动态填充）。我在父容器上使用此代码：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 10rem;
}
是否有可能以某种方式使其每隔一个第二行有 4 列而不是 3 列，所以我最终会得到这样的结果：
A B C
A B C D
A B C
A B C D
A B C
A B C D
我尝试过各种方法，但似乎没有任何效果。
编辑：也许我的问题不够清楚 - >我只有一个container和具有相同类名的 div 的随机数量，它们是container的直系子女。 nth-child(2n) 在这种情况下不起作用，因为我需要每第 4 个元素的列从 3 切换到 4，反之亦然。
每行上不能有不同数量的列，因为这违背了网格的目的。相反，您可以定义一个 12 列的网格，然后让您的孩子采用 3 列或 4 列：
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap:2px;
grid-row-gap: 5px;
}
.container > div {
grid-column:span 3;
height:40px;
background:red;
}
.container > div:nth-child(7n + 1),
.container > div:nth-child(7n + 2),
.container > div:nth-child(7n + 3) {
grid-column:span 4;
background:blue;
}
<div class="container">
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div>
</div>
如果您想拥有相同的尺寸，可以尝试以下操作：
.container {
display: grid;
grid-template-columns: repeat(16, 1fr);
grid-column-gap:2px;
grid-row-gap: 5px;
}
.container > div {
grid-column:span 4;
height:40px;
background:red;
}
.container > div:nth-child(7n + 1) {
grid-column:3/span 4;
}
.container > div:nth-child(7n + 3) {
grid-column:span 4/-3;
}
<div class="container">
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
