Html Flexbox-布置照片部分

我的目标是使该部分看起来像这样： （）

这是我当前的代码给我的： （）

我是一个初学者，很难安排好各个部分。我如何获得我当前的代码，以在我的目标图像中提供我想要的东西。谢谢

图片部分的我的HTML

<div class="mid-section">
      <div class="left-side">
          <img src="340h.png" alt="">
      </div>

      <div class="right-side">
        <img src="160hx140.png" alt="">
        <img src="160hx140.png" alt="">
        <img src="160hx140.png" alt="">
        <img src="160hx140.png" alt="">

      </div>
    </div>

---

首先，我建议阅读：

下一步，我们需要分解我们正在努力实现的目标。通常最容易按行和列分解布局，并最后执行元素之间的任何间距。因为有一个跨越两行的图像，对我来说，从一列开始比较容易。我从一个边框开始，以帮助直观地查看布局是否按预期工作

|  Col 1 | Col 2 | Col 3 |

要使用flexbox实现这一点，请执行以下操作：

div{
边框：2件纯蓝；
}
div>div{
边框：2倍纯红；
}
d-flex{
显示器：flex；
}
.弹性行{
弯曲方向：行；
}

第1列
第2列
第3列

CSS网格对此很有用。为了简洁起见，我简化了你的HTML

HTML

---

关于网格，您需要了解的一切：

下面是一个使用CSS网格的基本示例，它实现了您所追求的布局。我不需要为

.item1

（大图像）指定网格位置，因为该位置是隐式的。还要注意，我使用了

display:inline grid

，这样整个网格的宽度就和填充它的内容一样宽，而不是行的

100%

.grid{
显示：内联网格；
网格模板列：350px重复（3，1fr）；
网格模板行：135px 135px；
栅隙：10px；
}
.item2、.item4{
网格柱：2/3；
}
.item3、.item5{
网格柱：3/4；
}

感谢您的回复。你们帮了我很大的忙，我真的很感激：）@whocares6773如果有你用过的答案，请把它标记出来。

|  Col 1 | Col 2 | Col 3 |

<div class="mid-section">
  <img src="340h.png" alt="">
  <img src="160hx140.png" alt="">
  <img src="160hx140.png" alt="">
  <img src="160hx140.png" alt="">
  <img src="160hx140.png" alt="">
</div>

.mid-section {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

.mid-section img:first-child {
  grid-row-start: 1;
  grid-row-end: span 2;
}

img { 
  border: red solid 1px;
  min-height: 100px;
}