Как я могу расположить элементы внутри оболочки, как в примере ниже?

Question

Мне нужно расположить следующие элементы как Этот образец изображения с помощью CSS Flexbox.

.wrapper {
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  width: 200px;
  height: 200px;
  background: green;
  margin-bottom: 20px;
}

<div class="wrapper">
  <div class="element large"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element large"></div>
</div>

Я пробовал несколько стилей, но не смог добиться успеха. Есть ли способ исправить это с помощью css flex?

Answer 1

Если вы передумаете, решение Grid :

.grid {
  width: 60%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 100px); /* "width" */
  grid-template-rows: repeat(4, 100px); /* "height" */
  grid-gap: 10px; /* gap between items */
  justify-content: center; /* horizontally centered */
}

.item {
  background: green;
}

.larger {
  grid-column: 1 / span 2; /* starts at the 1st column & spans two */
  grid-row: 1 / span 2; /* starts at the 1st row & spans two */
  /* can also omit the 1's since it's the first child */
}

.larger2 {
  grid-column: 3 / span 2;
  grid-row: 3 / span 2;
}

<div class="grid">
  <div class="item larger"></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 larger2"></div>
</div>