如何创建具有特定宽度和高度的 div 的砌体布局？答案

【问题标题】：How do you create masonry layout with divs of specific widths and heights?如何创建具有特定宽度和高度的 div 的砌体布局？
【发布时间】：2023-03-13 17:35:02
【问题描述】：

我正在尝试实现如下所示的布局：

这是grid 中的7 图像，在特定位置具有不同的宽度和高度。

目前，我有以下内容：

.imageGrid {
  padding: 100px 0;
  background: #FFEE7E;
}
.imageGrid__grid {
  column-count: 3;
  column-gap: 12px;
  width: 100%;
/*   grid-template-columns: masonry;
  grid-template-rows: repeat(3, 100px); */
}
.imageGrid__gridItem {
  background-size: cover;
  background-repeat: no-repeat;
}
.imageGrid__gridItem--1 {
  height: 757px;
  width: 505px;
}
.imageGrid__gridItem--2 {
  width: 236px;
  height: 317px;
}
.imageGrid__gridItem--3 {
  width: 260px;
  height: 317px;
}
.imageGrid__gridItem--4 {
  width: 379px;
  height: 569px;
}
.imageGrid__gridItem--5 {
  width: 580px;
  height: 386px;
}
.imageGrid__gridItem--6 {
  width: 582px;
  height: 232px;
}
.imageGrid__gridItem--7 {
  width: 191px;
  height: 277px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">


<section class="imageGrid">
  <div class="container">

    <div class="row">
      <div class="col-12 col-md-5">
        <div class="imageGrid__intro">
          <h2 class="imageGrid__header">This is the header</h2>
          <p class="imageGrid__copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <div class="imageGrid__grid">

            <div class="imageGrid__gridItem imageGrid__gridItem--1" loading="lazy" style="background-image: url('https://picsum.photos/200/300');"></div>
            <div class="imageGrid__gridItem imageGrid__gridItem--2" loading="lazy" style="background-image: url('https://picsum.photos/200/300');"></div>
            <div class="imageGrid__gridItem imageGrid__gridItem--3" loading="lazy" style="background-image: url('https://picsum.photos/200/300');"></div>
            <div class="imageGrid__gridItem imageGrid__gridItem--4" loading="lazy" style="background-image: url('https://picsum.photos/200/300');"></div>
            <div class="imageGrid__gridItem imageGrid__gridItem--5" loading="lazy" style="background-image: url('https://picsum.photos/200/300');"></div>
            <div class="imageGrid__gridItem imageGrid__gridItem--6" loading="lazy" style="background-image: url('https://picsum.photos/200/300');"></div>
            <div class="imageGrid__gridItem imageGrid__gridItem--7" loading="lazy" style="background-image: url('https://picsum.photos/200/300');"></div>

        </div>
      </div>
    </div>

  </div>
</section>

但是，我不确定如何继续执行此操作。我已经搜索了codepen 和其他沙箱，但看不到像我的屏幕截图在那些演示中所描绘的砌体布局。

在我的演示中，我的部分图像也被添加到下一列。网格系统是实现这一目标的最佳方式吗？

【问题讨论】：

宽度似乎彼此无关，但众所周知，您是否想过将每个元素独立放置在正确的位置？
@AHaworth - 你建议absolute 定位每个网格项吗？
如果元素的宽度和高度之间存在更多关系，我可能会建议使用网格模板区域。但实际上，您不妨单独定位每一个。它非常无响应，但它是通过具有固定尺寸和细微差异（如 580 宽度高于 582 宽度）内置的。
学习网格，让它变得简单，或者安装砖石

标签： html css sass

【解决方案1】：

您可以将元素分成 2 列。左侧的标题和项目 1-2-3 和右侧的其他项目。然后在右列顶部给出负边距。

为了防止图像溢出，您可以使用

img{
    width:100%;
    height:100;
    object-fit:cover;
}

【讨论】：