如何将两个项目并排与一个项目并排对齐

Question

有了下面的标记，我希望使用flex系统(而不是网格)来获得下面附加的布局，并且不更改标记结构。

HTML：

<div class="container">
  <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 class="box box-6">item6</div>
</div>

​

​

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>

​