如何同时对齐两个项目和一个项目并排对齐

Question

使用以下标记，我希望使用flex系统（不使用网格）具有以下附件的布局，而无需更改标记结构。

HTML：

path("<slug>", posts_detail), #, name = "unique_slug"__<<

Answer 1

.grid {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  grid-gap: 20px;
}

.box {
  background-color: red;
  padding: 20px;
  &-2 {
    grid-row-end: span 5;
  }
}

<div class="grid">
  <div class="box box-1">item1</div>
  <div class="box box-2">item2</div>
  <div class="box box-3">item3</div>
  <div class="box box-4">item4</div>
  <div class="box box-5">item5</div>
  <div style="display:flex;">
    <div class="box" style="flex-grow: 1;">item6</div>
    <div class="box" style="flex-grow: 1;">item7</div>
  </div>
</div>

Answer 2

检查此：

.grid {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  grid-row-gap: 20px;
  grid-column-gap: 10px;
}

.box {
  background-color: red;
  padding: 20px;
}

.box-2 {
  grid-row-end: span 4;
}

.tempBox{
  grid-template-columns: auto auto;
}

<div class="grid">
  <div class="box box-1">item1</div>
  <div class="box box-2">item2</div>
  <div class="box box-3">item3</div>
  <div class="box box-4">item4</div>
  <div class="grid tempBox">
    <div class="box box-6">item5</div>
    <div class="box box-7">item6</div>
  </div>
</div>