砌体 - Divs 不对齐

Question

我正在尝试为我网站上的产品页面创建砌体布局。有一个带有width: 50%; 的方形图像，然后应该有4 个带有width: 25% 的方形图像，它们相互堆叠。

这是我到目前为止所取得的成就： https://prism-ferret-k6wy.squarespace.com/shop/

正如您将看到的，下面有两张图片可以放入可用的空白空间中。

Codepen：https://codepen.io/dwinnbrown/pen/aQmOVR

这是我的 Javascript：

$('.ProductList-grid').masonry({
            itemSelector: '.ProductList-item',
            percentPosition: true
          });

还有我的 CSS：

.ProductList .ProductList-item:nth-child(5n-4) {
        width: 50% !important;
    }


.ProductList .ProductList-item {
        float: none !important;
        margin: 0 !important;
        width: 25% !important;
    }

它应该是这样的：

Answer 1

使用 grid-sizer 来确定 columnWidth 也可以： https://codepen.io/anon/pen/pQEJXV

<div class="container">
  <!-- width of .grid-sizer used for columnWidth -->
  <div class="grid-sizer"></div>
  <div class="grid-item grid-item--width2 grid-item--height2">1
  </div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>  
  <div class="grid-item">5</div>
</div>

CSS

* { box-sizing: border-box; }
.container {
  max-width: 1200px;
  margin: auto;
}

.grid-item:first-of-type {
  background-color: pink !important;
}

.grid-sizer,
.grid-item {
  width: 25%;
}

.grid-item {
  height: 150px;
  float: left;
}

.grid-item--width2 {
  width:50%;
}

.grid-item--height2{
  height:300px;
}

.grid-item:nth-child(odd) {
  background-color: green;
}
.grid-item:nth-child(even) {
  background-color: orange;
}

JS

$(document).ready(function() {
  $('.container').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true
  });
});

响应式布局的文档：https://masonry.desandro.com/layout.html#responsive-layouts

Answer 2

HTML

<div class="container">
          <div class="grid-item">1</div>
          <div class="small-size">
                 <div class="grid-item">2</div>
                 <div class="grid-item">3</div>
                 <div class="grid-item">4</div>
                 <div class="grid-item">5</div>
          </div>
   </div>

CSS

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.grid-item:first-of-type {
  background-color: pink !important;
  width: calc(50% - 10px);
  height: 300px;
}

.grid-item:nth-child(odd) {
  background-color: green;
}
.grid-item:nth-child(even) {
  background-color: red;
}

.small-size {
 display: flex;
 flex-wrap: wrap;
 width: 50%;
}

.small-size .grid-item {
  width: 50%;
  height: 150px;
}

JS

$(document).ready(function() {
  $('.container').masonry({
    percentPosition: true,
    gutter: 10
  });
});