小编Min*_*huq的帖子

我有一个容器，其中包含未知数量的子级（动态填充）。我在父容器上使用此代码：

.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，反之亦然。