Shopify产品网格如何实现Pinterest瀑布流布局消除行内空白

效果参考 #

• 当前常规flex网格效果：
• 目标无留白错落瀑布流效果：

原有基于flex换行的网格逻辑，会强制所有网格项按行对齐，高度偏短的产品卡片下方会出现多余留白，无法实现错落贴齐的效果。纯CSS多列布局可以零JS成本实现目标效果，兼容所有主流浏览器，且完全复用主题原有间距变量，不会破坏全局样式逻辑。

完整替换CSS代码 #

直接用以下代码替换你原有的网格CSS即可：

.grid {
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  column-count: 2;
}
@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    column-count: 4;
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: 100%;
  max-width: 100%;
  margin-bottom: var(--grid-mobile-vertical-spacing);
  /* 核心配置：禁止产品卡片跨列截断 */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
@media screen and (min-width: 750px) {
  .grid__item {
    margin-bottom: var(--grid-desktop-vertical-spacing);
  }
}
.grid__item:last-of-type {
  margin-bottom: 0;
}

配置说明 #

• 列数调整：直接修改对应断点下的column-count值即可，比如桌面端需要3列布局就把750px断点下的该值改为3
• 间距逻辑完全复用主题原有变量，不需要额外调整间距数值，和全站其他模块的间距规则保持统一
• 多列布局的填充逻辑为纵向优先，和Pinterest信息流逻辑完全一致：会先把当前列填充到对应高度再排布下一列，自动消除短卡片下方的多余留白
• 代码内的break-inside: avoid是为了防止产品卡片在列中间被拆分截断，避免出现图片、价格被切到下一列的显示问题

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