Grid 照片墙

https://www.bilibili.com/video/BV1cY411z7KA/?spm_id_from=333.999.list.card_archive.click&vd_source=addacb3d2f4010b444798eebc62ffc61

<div class="photo-wall">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

css 参考

.photo-wall {
  margin: 12px;
  border-radius: 6px;
  width: 100%;
  display: grid;

  height: 516px;

  max-width: 800px;

  grid-template-rows: 4fr 2fr 4fr;
  grid-template-columns: 3fr 1fr 3fr 3fr;
  grid-gap: 1px;
  span {
    background-image: url("/still-life-with-a-gilt-cup.jpg");
    background-size: 800px;
    transition: all 0.5s;
  }

  span:hover {
    transform: scale(1.2);
  }
  span:first-child {
    grid-row: 1/3;
    grid-column: 1 / 2;
  }

  span:nth-child(2) {
    background-position: -40% 0;
    grid-row: 1/3;
    grid-column: 2 / 4;
  }
  span:nth-child(3) {
    background-position: -70% 0;
    grid-row: 1/2;
    grid-column: 4 / 5;
  }
  span:nth-child(4) {
    background-position: -0 -60%;
    grid-column: 1 / 3;
  }
  span:nth-child(5) {
    background-position: -30% -60%;
    grid-column: 3 / 4;
  }
  span:nth-child(6) {
    grid-row: 2/4;
    grid-column: 4 / 5;
    background-position: -70% -40%;
  }
}