如何随父容器宽度调整Grid Box列数？Shopify克隆应用适配

完全可以用CSS Grid或JavaScript实现，两种方案各有适用场景，具体如下：

一、CSS Grid方案（推荐） #

纯CSS就能实现响应式列数调整，无需额外脚本，性能和可维护性都更好。核心思路是结合媒体查询和grid-template-columns属性，根据容器宽度区间设置对应列数：

/* 基础网格容器样式 */
.grid-container {
  display: grid;
  gap: 1rem; /* 可自定义网格项之间的间距 */
}

/* 容器宽度≥1500px时，显示7列 */
@media (min-width: 1500px) {
  .grid-container {
    grid-template-columns: repeat(7, 1fr);
  }
}

/* 容器宽度在1220px~1499px之间时，显示5列 */
@media (min-width: 1220px) and (max-width: 1499px) {
  .grid-container {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* 容器宽度在900px~1219px之间时，显示4列 */
@media (min-width: 900px) and (max-width: 1219px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 容器宽度<900px时，设置默认列数（比如3列，可按需调整） */
@media (max-width: 899px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

这种方案的优势：

• 无需JS介入，浏览器原生支持，性能开销极低
• 代码简洁，规则清晰，后期维护成本低
• 完全符合响应式设计的标准流程

二、JavaScript方案（适合复杂场景） #

如果需要根据动态内容、自定义逻辑或更精细的宽度判断调整列数，可以用JS监听容器宽度变化，动态修改网格列数：

// 获取目标网格容器
const gridContainer = document.querySelector('.grid-container');

// 定义宽度断点与对应列数的映射
const breakpointConfig = [
  { minWidth: 1500, columns: 7 },
  { minWidth: 1220, columns: 5 },
  { minWidth: 900, columns: 4 },
  { minWidth: 0, columns: 3 } // 默认最小列数
];

// 计算当前宽度对应的列数
function getTargetColumns() {
  const containerWidth = gridContainer.offsetWidth;
  for (const config of breakpointConfig) {
    if (containerWidth >= config.minWidth) {
      return config.columns;
    }
  }
  return 3; // 兜底默认值
}

// 更新网格列数
function updateGridLayout() {
  const columns = getTargetColumns();
  gridContainer.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
}

// 初始化时执行一次
updateGridLayout();

// 监听窗口 resize 事件，加入防抖避免频繁触发
const debounce = (func, delay = 100) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

window.addEventListener('resize', debounce(updateGridLayout));

这种方案的适用场景：

• 需要根据动态加载的内容（比如网格项高度差异）调整列数
• 宽度断点需要动态计算而非固定值
• 结合其他交互逻辑同步调整布局

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