html - 发现很难实现照片网格布局

Question

我发现很难实现这个精确的照片网格关于如何去做的任何想法？ enter image description here

澄清一下，我已经有了工作原型(prototype) enter image description here这是用 flexbox 完成的，但其中一个不太合适，所以我不得不使用绝对位置，这在其他屏幕尺寸上显示时效果不佳。

这是我的代码

.container-ed {
  padding: 0px 40px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 30px;
}

.pic-ed {
  position: relative;
}

.pic-ar {
  position: absolute;
  right: 40px;
  margin-top: 280px;
}

.pic-ad {
  margin-top: 10px;
}

<div class="container-ed">
      <img class="pic-ed" src="img/pic.svg" height="550" width="600">
     <!-- <img class="x-ed" src="img/ex-ed.svg"> -->
      <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
      <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
      <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
      <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
      <img class="pic-ar" src="img/Rectangle%20136.svg" height="250" width="300">

    </div>

Answer 1

这是你要找的吗？

.photo-grid {
    width: 400px;
    height: 400px;
}
.grid {
    display: inline-block;
    vertical-align: top;
    float: left;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #aaa;
    background-color: #eee;
}
.grid:before {
    content: attr(data-label);
    position: absolute;
    top: 3px;
    left: 3px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0px 0px 1px #000;
    font-size: 2rem;
    font-family: sans-serif;
}
.grid.small {
    width: 33.3%;
    height: 33.3%;
}
.grid.medium {
    width: 66.6%;
    height: 66.6%;
}
.grid.right {
    float: right;
}

<div class="photo-grid">
    <div class="grid medium" data-label="1"></div>
    <div class="grid small" data-label="2"></div>
    <div class="grid small" data-label="3"></div>
    <div class="grid small right" data-label="4"></div>
    <div class="grid small right" data-label="5"></div>
    <div class="grid small right" data-label="6"></div>
</div>