Можно ли сделать каждую вторую строку в CSS-сетке разным количеством столбцов?

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) в этом случае не работает, потому что мне нужно, чтобы каждый четвертый элемент столбца переключался с 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;
}