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

Question

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

这是一个由7不同宽度和高度的图像组成的grid ，位于特定位置。

目前，我有以下内容：

 .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和其他沙箱，但看不到像我在这些演示中所描绘的屏幕截图那样的砌体布局。

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

Answer 1

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

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

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