是否可以让 CSS Grid 中的每一行都有不同的列数？

Question

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

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

Answer 1

每行不能有不同的列数，因为这违背了网格的目的。相反，您可以定义一个 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>

Answer 2

是的，使用.container childclass:nth-child(Xn)

在这里阅读：

更简单的链接：https://www.w3schools.com/cssref/sel_nth-child.asp 更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

在此处查看示例： https://jsfiddle.net/520Ltahd/

使用数学来找到盒子序列的正确公式。像这样：

/*The row with 4 columns*/
.container div{
  padding:20px;
  display:inline-block;
  width:25%;
  margin:0px;
  padding:0px;
  background-color:blue;
}
/*The row with 3 columns*/
.container div:nth-child(7n-6),.container div:nth-child(7n-5),.container div:nth-child(7n-4) {
  background: red;
width:33.333%;
margin:0px;
}