如何在Shopify中实现2列+3列循环的动态网格布局？

一、纯CSS Grid 实现（推荐，无需复杂逻辑） #

利用CSS Grid的列规则结合循环模式，直接实现2列→3列的重复布局，完全不需要在Liquid里做分组处理，最符合代码规范。

.logo-grid {
  display: grid;
  gap: 1rem;
  /* 按2列→3列的规则循环排列，自动适配任意数量的区块 */
  grid-template-columns: 
    repeat(2, 1fr) 
    repeat(3, 1fr) 
    repeat(2, 1fr) 
    repeat(3, 1fr);
}

/* 移动端可统一调整为2列 */
@media (max-width: 768px) {
  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Liquid部分只需直接遍历区块输出：

<div class="logo-grid">
  {% for block in section.blocks %}
    <div class="logo-block">
      {{ block.settings.logo_text }}
      <!-- 区块其他内容 -->
    </div>
  {% endfor %}
</div>

原理：CSS Grid会按照grid-template-columns定义的规则循环排列元素，前2个区块用2列布局，接下来3个用3列，后续自动重复该模式，完全适配区块的添加或删除。

二、Liquid 逻辑优化（无零散开闭div） #

如果必须通过Liquid分组，避免在循环里零散判断开闭div，先把区块按2+3的规则提前分组，再遍历分组输出：

{% assign blocks = section.blocks %}
{% assign groups = '' | split: '' %}
{% assign current_group = '' | split: '' %}
{% assign cycle_counter = 0 %}

{% for block in blocks %}
  {% assign cycle_counter = cycle_counter | plus: 1 %}
  {% assign current_group = current_group | push: block %}
  
  <!-- 满2个或累计满5个（2+3）时，完成当前分组 -->
  {% if cycle_counter == 2 or cycle_counter == 5 %}
    {% assign groups = groups | push: current_group %}
    {% assign current_group = '' | split: '' %}
    {% assign cycle_counter = 0 %}
  {% endif %}
{% endfor %}

<!-- 处理剩余未分组的区块 -->
{% if current_group.size > 0 %}
  {% assign groups = groups | push: current_group %}
{% endif %}

<!-- 遍历分组输出容器和区块 -->
{% for group in groups %}
  <div class="logo-group grid-{{ group.size }}">
    {% for block in group %}
      <div class="logo-block">{{ block.settings.logo_text }}</div>
    {% endfor %}
  </div>
{% endfor %}

对应CSS：

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

优势：所有分组逻辑在循环外完成，代码结构清晰，没有零散的div开闭操作，符合团队评审要求。

三、JavaScript 辅助分组（动态适配） #

如果需要后续灵活调整列数规则，可通过JS处理DOM分组，Liquid代码保持极简：

Liquid部分直接输出所有区块：

<div class="logo-container">
  {% for block in section.blocks %}
    <div class="logo-block">{{ block.settings.logo_text }}</div>
  {% endfor %}
</div>

JS代码：

const container = document.querySelector('.logo-container');
const blocks = Array.from(container.children);
const columnPattern = [2, 3]; // 定义2列→3列的循环模式
let patternIndex = 0;
let currentGroup = [];

blocks.forEach(block => {
  currentGroup.push(block);
  const currentColumnCount = columnPattern[patternIndex];
  
  if (currentGroup.length === currentColumnCount) {
    // 创建分组容器并插入DOM
    const group = document.createElement('div');
    group.classList.add('logo-group', `grid-${currentColumnCount}`);
    currentGroup.forEach(el => group.appendChild(el));
    container.appendChild(group);
    
    // 重置临时分组，切换到下一个列数模式
    currentGroup = [];
    patternIndex = (patternIndex + 1) % columnPattern.length;
  }
});

// 处理剩余未分组的区块
if (currentGroup.length > 0) {
  const group = document.createElement('div');
  group.classList.add('logo-group', `grid-${currentGroup.length}`);
  currentGroup.forEach(el => group.appendChild(el));
  container.appendChild(group);
}

CSS与第二种方法一致，这种方式把分组逻辑完全交给JS，Liquid代码最简洁，适合复杂的动态布局需求。

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