2

我使用 Masonry 作为布局引擎。我的基本网格项目是正方形（在本例中为 25% 宽度），而宽项目的宽度为 100%。

到现在为止零问题，但我希望宽项目不会中断项目的流动，所以没有留下那么多空白。那可能吗？

提前致谢。

这是代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<style>
  .grid-sizer, .grid-item { width: 25%; height: 25vw; border: 1px; border-color: black; border-style: solid; margin: 0; box-sizing: border-box; text-align: center; font-size: 60px; color: darkgray; font-family: sans-serif; padding-top: 50px;}
  .grid-item--width2 { width: 100%; }
</style>
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item grid-item--width2">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>
<script>
$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
})
</script>

当前布局（图片）

预期结果（图片）

更新说明：

我仍然不知道如何在 Masonry 中实现预期的结果，但是有一种纯 CSS 方法可以做到这一点：网格，将grid-auto-flow设置为dense。

4

0 回答 0