如何在for循环中实现产品列表按2、4、3、2规律排列的不等行布局

核心思路 #

你需要的排布规则为每3行一个循环，每行产品数依次为2个、4个、3个，单个循环周期共9个产品。直接通过CSS Grid配合Liquid循环索引标记列宽实现即可，不需要手动拆分列表组，兼容任意产品总数，不会出现HTML标签闭合错误。

可直接复用的代码 #

修改后的Liquid模板代码 #

<ul class="product-loop-grid">
{% for product in collection.products %}
  {% assign cycle_index = forloop.index0 | modulo: 9 %}
  {% assign col_span = 6 %}
  {% if cycle_index >= 2 and cycle_index < 6 %}
    {% assign col_span = 3 %}
  {% elsif cycle_index >= 6 %}
    {% assign col_span = 4 %}
  {% endif %}
  <li class="product-item" style="--col-span: {{ col_span }}">
    {{ product }}
  </li>
{% endfor %}
</ul>

配套CSS样式 #

.product-loop-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px; /* 可根据设计需求调整产品间距 */
}
.product-item {
  grid-column: span var(--col-span);
}
/* 移动端适配：屏幕宽度小于768px时统一单列排布 */
@media (max-width: 768px) {
  .product-loop-grid {
    grid-template-columns: 1fr;
  }
  .product-item {
    grid-column: span 1;
  }
}

逻辑说明 #

• 采用12列栅格作为基础布局，12可被2、3、4整除，不需要计算小数宽度，不会出现布局缝隙
• 通过forloop.index0获取从0开始的产品循环索引，对9取模得到每个产品在单个排布周期内的位置
• 周期内索引0、1对应第一行的2个产品，每个占6列，2个产品刚好填满12列后自动换行
• 周期内索引2-5对应第二行的4个产品，每个占3列，4个产品填满12列后自动换行
• 周期内索引6-8对应第三行的3个产品，每个占4列，3个产品填满12列后自动换行
• 后续产品自动重复上述排布规则，即使最后一行产品数量不足，也会按对应宽度排列，不会出现布局错乱

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