CSS Grid auto-fill搭配列跨距在小容器强制多列如何解决

你遇到的问题本质是CSS Grid规范中，span N跨列声明的优先级高于auto-fill的自动列数计算逻辑，会强制网格生成至少N列，不会自动适配实际可容纳的列数。有两种成熟的解决方案：

方案1：使用CSS容器查询（推荐，兼容性已覆盖主流浏览器） #

这是最符合你需求的原生解决方案，不需要依赖视口宽度，直接以网格容器本身的宽度作为判断条件。

首先给网格容器添加容器类型声明：

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #fff;
  color: #444;
  /* 新增：将该元素设为容器查询的上下文 */
  container-type: inline-size;
  container-name: grid-wrapper; /* 可选，避免和其他容器查询冲突 */
}

然后添加容器查询规则，根据容器宽度动态调整跨列数：

/* 默认跨3列，对应容器宽度≥ 3*200px + 2*10px = 620px的场景 */
.k {
  grid-column: auto / span 3;
}
/* 容器宽度小于620px时，最多跨2列 */
@container grid-wrapper (max-width: 619px) {
  .k {
    grid-column: auto / span 2;
  }
}
/* 容器宽度小于 2*200px + 10px = 410px时，跨1列 */
@container grid-wrapper (max-width: 409px) {
  .k {
    grid-column: auto / span 1;
  }
}

/* 同理调整跨2列的元素 */
.a, .g {
  grid-column: auto / span 2;
}
@container grid-wrapper (max-width: 409px) {
  .a, .g {
    grid-column: auto / span 1;
    .g {
      grid-row: auto / span 1; /* 可选，列数不足时也取消跨行 */
    }
  }
}

方案2：兼容旧浏览器的JS实现方案 #

如果需要兼容不支持容器查询的旧版本浏览器，可以用ResizeObserver监听网格容器宽度，动态计算当前列数后调整跨列值：

const gridWrapper = document.getElementById('grid-example');
const minColWidth = 200; // 对应你设置的minmax最小宽度
const gap = 10; // 对应grid-gap值

// 计算当前容器可容纳的列数
const calcColNum = () => {
  const wrapperWidth = gridWrapper.clientWidth;
  return Math.floor((wrapperWidth + gap) / (minColWidth + gap));
}

// 更新跨列值
const updateSpan = () => {
  const colNum = calcColNum();
  document.querySelectorAll('.k').forEach(el => {
    el.style.gridColumnEnd = `span ${Math.min(3, colNum)}`;
  });
  document.querySelectorAll('.a, .g').forEach(el => {
    el.style.gridColumnEnd = `span ${Math.min(2, colNum)}`;
    if(el.classList.contains('g')) {
      el.style.gridRowEnd = colNum >=2 ? 'span 2' : 'span 1';
    }
  });
}

// 监听容器尺寸变化
const observer = new ResizeObserver(updateSpan);
observer.observe(gridWrapper);

// 初始化
updateSpan();

两种方案都可以解决span强制生成多余列的问题，优先选择容器查询方案，代码更简洁性能更好。

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