如何创建这个砖石布局

Question

任何人都可以指导我如何创建这种类型的砖石布局吗？是否可以使用

display: grid

创建这种类型的砖石画廊以及如何重叠图层？还有其他方法可以创建这个吗？

我尝试使用下面的代码，但这似乎不太好。我也想让它响应。

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.masonry-grid .grid-item {
  position: relative;
}

.masonry-grid .grid-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.item-1 {
  grid-area: 1 / 1 / 2 / 2;
  height: 230px;
  margin: 20px -140px 0 0;
  z-index: 2;
}

.item-2 {
  grid-area: 1 / 2 / 3 / 3;
  height: 465px;
  z-index: 1;
}

.item-3 {
  grid-area: 1 / 3 / 4 / 4;
  max-height: 765px;
  margin-top: 20px;
  margin-right: -40px;
  z-index: 1;
}

.item-4 {
  grid-area: 1 / 4 / 2 / 5;
  /*margin-left: -40px;*/
  margin-right: 20px;
}

.item-5 {
  grid-area: 2 / 1 / 4 / 2;
  max-height: 585px;
  margin: -40px -10px 0 0;
}

.item-6 {
  grid-area: 3 / 2 / 4 / 3;
  max-height: 350px;
  margin: -160px -90px 0 0;
}

.item-7 {
  grid-area: 2 / 4 / 3 / 5;
  margin: 20px 0 0 -40px;
  z-index: 1;
}

.item-8 {
  grid-area: 4 / 1 / 5 / 2;
  max-height: 540px;
  margin: -300px 0 0;
}

.item-9 {
  grid-area: 4 / 2 / 6 / 3;
  max-height: 650px;
  width: 650px;
  margin: -310px 0 0 -50px;
}

.item-10 {
  grid-area: 4 / 3 / 5 / 4;
  margin: -491px 0 0;
}

.item-11 {
  grid-area: 3 / 4 / 4 / 5;
  margin: -50px 0 0 40px;
}

.item-12 {
  grid-area: 5 / 3 / 6 / 4;
  margin: -186px 0 0 -40px;
  z-index: 1;
}

.item-13 {
  grid-area: 4 / 4 / 5 / 5;
  margin: 50px 0 0 -50px;
  max-width: 480px;
}

<div class="masonry-grid">
  <div class="grid-item item-1">
    <img src="1.png" alt="">
  </div>
  <div class="grid-item item-2">
    <img src="2.png" alt="">
  </div>
  <div class="grid-item item-3">
    <img src="3.png" alt="">
  </div>
  <div class="grid-item item-4">
    <img src="4.png" alt="">
  </div>
  <div class="grid-item item-5">
    <img src="5.png" alt="">
  </div>
  <div class="grid-item item-6">
    <img src="6.png" alt="">
  </div>
  <div class="grid-item item-7">
    <img src="7.png" alt="">
  </div>
  <div class="grid-item item-8">
    <img src="8.png" alt="">
  </div>
  <div class="grid-item item-9">
    <img src="9.png" alt="">
  </div>
  <div class="grid-item item-10">
    <img src="10.png" alt="">
  </div>
  <div class="grid-item item-11">
    <img src="11.png" alt="">
  </div>
  <div class="grid-item item-12">
    <img src="12.png" alt="">
  </div>
  <div class="grid-item item-13">
    <img src="13.png" alt="">
  </div>
</div>

Answer 1

考虑到设计，你正在做的事情看起来不错。

但是，我认为这是您想要反对的设计，因为它有几个缺陷：

• 任意间隙
• 任意重叠
• 你需要 4 个不同的 z 索引，并且很难看到“规则”
• 难以缩放（如果图像数量是原来的两倍怎么办，我真的看不出设计的逻辑）

因此，我将从对设计进行更清晰/合乎逻辑的解释开始。

EG：

• 我会从一种 unsplash 的布局开始，但是是 4 列而不是 3 列。 （它也是基于网格的）
• 我不会明确设置任何网格项的高度或宽度，而是在各处保持相同的宽度，并让图像决定高度以保持原始尺寸。
• 我会尝试使用基于

  nth-child(odd)

  和

  nth-child(even)

  伪选择器的智能 CSS 规则来替换 z 索引和重叠行为。 （负边距可能看起来像是一个疯狂的黑客，但如果它有效，为什么不呢？您也可以尝试使用

  translate: scale(1.05)

  和

  translate: scale(0.95)

  来实现这一目标。

响应能力：

您可以使用媒体查询，例如：

@media only screen and (max-width: 600px) and (min-width: 400px)  {...}

对不同的断点有不同的规则。

上述内容仅适用于大尺寸。 如果稍微小一点，3 列就足够了。 如果您选择智能手机尺寸，您应该只显示上面和下面的图像。

希望有帮助