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;
}

是否可以使CSS网格中的第二行具有不同的列数？

2 个答案: