Untitled

<body>
  <main>
    <section id="one">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">
        <div class="item-five">5.1</div>
        <div class="item-five">5.2</div>
      </div>
      <div class="item item-six-main">
        <div class="item-six">6.1</div>
        <div class="item-six">6.2</div>
        <div class="item-six">6.3</div>
        <div class="item-six">6.4</div>
        <div class="item-six">6.5</div>
        <div class="item-six">6.6</div>
        <div class="item-six">6.7</div>
      </div>
    </section>
  </main>
</body>

body {
  background-color: rgb(209, 253, 138);
}

@media(min-width: 1225px) {
  #one {
    background-color: rgb(40, 255, 51);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

#one {
  border: 5px solid red;
  background-color: rgb(180, 153, 255);
  height: 500px;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  margin: 10px;
  padding: 20px;
  background-color: bisque;
  flex-basis: 20%;

}

.item-five {
  background-color: rgb(245, 101, 173);
  margin: 5px;
  height: 50%;
}

.item-six-main {
  background-color: red;
  display: flex;
  align-content: stretch;
}

.item-six {
  background-color: rgb(131, 250, 230);
  margin: 5px;
}