Flex блоки друг под другом

Question

Подскажите пожалуйста, как я могу сделать что блок 4 и 6 были под блоками 1 и 3 без свободного места? Заранее спасибо.

#parrent {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

#parrent div {
  width: 30%;
  margin: 1.5%;
}

<div id="parrent">
  <div style="background: red; height: 250px;"></div>
  <div style="background: blue; height: 350px;"></div>
  <div style="background: green; height: 250px;"></div>
  <div style="background: purple; height: 450px;"></div>
  <div style="background: yellow; height: 350px;"></div>
  <div style="background: black; height: 450px;"></div>
</div>

Answer 1

Можно через grid попробовать.

#parrent {
  display: grid;
  grid-template: 250px 90px 350px / repeat(3, 1fr);
  grid-gap: 10px;
}

#parrent > div:nth-child(2), #parrent > div:nth-child(4), #parrent > div:nth-child(5) {
  grid-row: span 2;
}

#parrent > div:last-child {
  grid-column: 2/3;
}

<div id="parrent">
  <div style="background: red; "></div>
  <div style="background: blue;"></div>
  <div style="background: green; "></div>
  <div style="background: purple; "></div>
  <div style="background: black;"></div>
  <div style="background: yellow; "></div>  
</div>

БЛОГ НА HUSL

Flex блоки друг под другом

Ответы (1 шт):