Masonry JS 50%与100%宽度元素布局失效问题求助

问题出在Masonry的列宽配置和元素宽度的对应关系没匹配，再加上盒模型的计算偏差，导致左侧布局没法正常填充空隙。直接改这几点就能解决：

• 统一盒模型，避免宽度溢出
  给所有网格相关元素加盒模型设置，防止padding、border挤占宽度：

.grid, .grid-item, .grid-sizer {
  box-sizing: border-box;
}

• 匹配列宽与元素宽度比例
  左侧网格的最小单元是50%宽度，所以得把columnWidth设为这个最小单元，同时明确元素宽度：

  1. 左侧的.grid-sizer宽度设为50%
  2. 占100%宽度的卡片加width: 100%，占50%的加width: 50%

• 调整Masonry初始化代码
  把初始化放在DOM加载完成后执行，同时开启百分比布局适配：

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

• 清理干扰样式
  检查左侧卡片有没有加float、absolute定位这类样式，这些会打乱Masonry的布局逻辑，直接删掉就行。

改完之后，Masonry会以50%宽度为基准单元，100%的卡片占2个单元，50%的占1个，就能自动把item3填充到item1下方的空隙里了。

内容的提问来源于stack exchange，提问作者stebal