无法通过砌体布局实现预期效果

Question

我真的很难过。由于这是一个布局问题，因此您需要查看我的codepen example。

基本上，如果你在第二行看到，两个街区之间有一个巨大的空间。为什么？为什么它排队？

这是砌筑的选项：

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

另外，摆弄第三个网格项的宽度。理想情况下，我希望它是50％，所有我的div将在空间中融合在一起，紧紧地包装。我有自定义宽度的原因是40％是它移动到下一行之前的最大宽度。为什么？它需要在同一行。 50％+ 50％= 100％所以有空间。为什么你认为它坏了？

1）JQuery插件https://github.com/desandro/masonry

Answer 1

空格是因为columnWidth是20％，但第一项是50％。 50％的项目四舍五入至60％。所以有10％的额外空间。

但如果改变.grid-sizer {width：10％;这将允许50％的项目在50％测量。