CSS Grid - конвертировать из макета flexbox

Question

Я пытаюсь добиться следующего макета с использованием CSS-сетки ...

В настоящее время я использую flex для его генерации следующим образом ..

.row1 {
display:flex;
}

.row1 .item {
  background:red;
  width:50%;
  padding:20px;
  margin:10px;
  color:white;
  text-align:center;
}

.row2 {
display:flex;
}

.row2 .item {
  color:white;
  text-align:center;
  background:red;
  width:33%;
  padding:20px;
  margin:10px;
}

<div class="row1">
  <div class="item">
    Item
  </div>
  <div class="item">
    Item
  </div>
</div>

<div class="row2">
  <div class="item">
    Item
  </div>
  <div class="item">
    Item
  </div>
    <div class="item">
    Item
  </div>
</div>

это, но я пытаюсь преобразовать его, как я могу сделать так, чтобы версия CSS-сетки повторялась в этом шаблоне для динамического содержимого?

Answer 1

С display:grid достаточно одного контейнера. чтобы повторить паттерн, вы можете использовать селектор nth-child(xn).

Пример

body {
  display: grid;
  grid-template-columns: repeat(6, 1fr);/* because it cannot be broken into 3 columns, but 2x3 columns*/
}

div {
  grid-column: auto/span 2;/* makes a third of the 6 cols */
}

div:nth-child(5n -3),
div:nth-child(5n - 4) {/* why 5n ? , because your pattern is made of 5 elements */
  grid-column: auto/span 3;/* to reset 2 of them to half width */
}


/* makeup */
div {
  padding: 1em;
  background: rgb(51, 103, 153);
  color: white;
  text-align: center;
  margin: 5px;
}

body {
  counter-reset: divs
}

div:before {
  counter-increment: divs;
  content: counter(divs)
}

<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></div>
<div></div>
<div></div>
<div></div>
<div></div>

Некоторое чтение, чтобы пойти дальше и разобраться со своими следующими шаблонами сетки: о nth-child https://css -tricks.com / how-nth-child-works /

и сетка: https://css -tricks.com / snippets / css / complete-guide-grid / & https://gridbyexample.com/

Answer 2

Этот фрагмент CSS - самое простое изменение, которое вы можете начать с ..

body > .container {
    display: grid;
    grid-templet-column: repeat(6,1fr);
    padding: 20px;
    grid-gap: 20px;
}

.container div {
    background: red;
    grid-column: span 2;
    padding: 20px;
    height: 1pc;
}

.container div:nth-child(5n+1),  .container div:nth-child(5n+1) + div {
    grid-column: span 3;
}