CSS Flexbox Layout - 3 столбца и 2 столбца обмена

Question

Может кто-нибудь помочь мне с этим макетом, используя Flexbox.Мне нужен макет, который повторяется от 3 столбцов до 2 столбцов, а затем обратно до 3 столбцов.Я добавил изображение ниже относительно того, что я имею в виду.

Answer 1

Вы можете использовать двойной размер сгиба для каждого элемента nth-child(10n + 4) и nth-child(10n + 10).

.grid {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: calc(33.33% - 10px);
  height: 70px;
  margin: 5px;
  background: #BD1522;
}
.item:nth-child(10n + 4),
.item:nth-child(10n + 10) {
  flex: calc(66.66% - 10px);
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>