如何制作这个网格图像部分？

Question

这是这张图片

我正在为网页创建网格图像部分，但我在正确布局或对齐方面遇到困难。我正在寻找有关如何构建 HTML/CSS 以实现简洁且响应灵敏的网格设计的指南。我正在附上一张图片。请大家观看

Answer 1

对于这个特定的布局：~方形父级中的 9 个项目，您可以使用 CSS 网格，定义所需的

grid-template-areas

并将每个子级放置在所需的区域内。

* {
  box-sizing: border-box;
  margin: 0;
}

.container {
  display: grid; 
  grid-template-columns: repeat(8, 1fr); 
  grid-template-rows: repeat(7, 1fr); 
  grid-template-areas: 
    "a1 a1 a2 a2 a2 a3 a3 a3"
    "a1 a1 a2 a2 a2 a3 a3 a3"
    "a1 a1 a5 a5 a6 a6 a6 a6"
    "a4 a4 a5 a5 a6 a6 a6 a6"
    "a4 a4 a5 a5 a8 a8 a9 a9"
    "a7 a7 a7 a7 a8 a8 a9 a9"
    "a7 a7 a7 a7 a8 a8 a9 a9"
  ;
  margin: auto;
  gap: 1.5rem;
  max-width: 500px;
  aspect-ratio: 1;
  
  > div {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    
    > img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
  }
}
.a1 { grid-area: a1; }
.a2 { grid-area: a2; }
.a3 { grid-area: a3; }
.a4 { grid-area: a4; }
.a5 { grid-area: a5; }
.a6 { grid-area: a6; }
.a7 { grid-area: a7; }
.a8 { grid-area: a8; }
.a9 { grid-area: a9; }

<div class="container">
  <div class="a1"><img src="https://picsum.photos/id/10/500/500" alt="image"></div>
  <div class="a2"><img src="https://picsum.photos/id/20/500/500" alt="image"></div>
  <div class="a3"><img src="https://picsum.photos/id/30/500/500" alt="image"></div>
  <div class="a4"><img src="https://picsum.photos/id/40/500/500" alt="image"></div>
  <div class="a5"><img src="https://picsum.photos/id/50/500/500" alt="image"></div>
  <div class="a6"><img src="https://picsum.photos/id/60/500/500" alt="image"></div>
  <div class="a7"><img src="https://picsum.photos/id/70/500/500" alt="image"></div>
  <div class="a8"><img src="https://picsum.photos/id/80/500/500" alt="image"></div>
  <div class="a9"><img src="https://picsum.photos/id/90/500/500" alt="image"></div>
</div>

然后，对于响应部分，您可能需要根据需要在

grid-template-areas

 中更改 

@media