CSS Grid列能否尊重跨多列项目的min-width？

先梳理你遇到的两种场景，再给出解决办法和规范相关的说明：

正常场景：单列项目的预期表现 #

当项目仅占据一列时，你的代码运行完全符合预期：

.grid { 
  display: grid; 
  grid-template-columns: [one] minmax(auto, 1fr) [two] minmax(auto, 1fr); 
} 
.item { 
  grid-column: one; 
  min-width: 3rem; 
}

<div class="grid"> 
  <div class="item">Item</div> 
</div>

两列会填满可用空间，父容器缩小时，第一列被min-width: 3rem限制无法继续缩小，第二列则会收缩至0，逻辑完全通顺。

异常场景：跨列项目的问题表现 #

但当项目跨两列布局时，就出现了不符合预期的情况：

.item { 
  grid-column: one / span 2; 
  min-width: 3rem; 
}

此时所有列都会收缩至0，项目的min-width似乎被完全忽略，你提到的minmax(auto, 1fr)里的auto在这里表现得等同于0，这确实是Grid布局里一个容易踩的坑。

解决方案：让Grid尊重跨列项目的min-width #

要实现「跨列项目保留min-width限制，同时在空间充足时随网格扩展」的需求，你可以尝试以下两种方案：

方案1：给网格容器设置min-width: min-content #

这是最简洁的处理方式，让容器本身尊重子项的最小宽度需求：

.grid { 
  display: grid; 
  grid-template-columns: [one] minmax(auto, 1fr) [two] minmax(auto, 1fr);
  min-width: min-content; /* 关键：容器不会缩小到小于子项的最小宽度 */
} 
.item { 
  grid-column: one / span 2; 
  min-width: 3rem; 
}

空间充足时，两列仍会平分可用空间；空间不足时，容器会停止收缩，保证项目的min-width: 3rem被满足。

方案2：修改grid-template-columns的最小尺寸定义 #

如果你想更精准控制每列的最小尺寸，可以把minmax(auto, 1fr)替换为minmax(min-content, 1fr)，或者直接关联跨列项目的min-width：

.grid { 
  display: grid; 
  /* 每列最小宽度参考内容尺寸，也可以用calc(3rem / 2)直接对应跨列项目的min-width */
  grid-template-columns: [one] minmax(min-content, 1fr) [two] minmax(min-content, 1fr); 
} 
.item { 
  grid-column: one / span 2; 
  min-width: 3rem; 
}

这种方式让每列的最小尺寸基于内容计算，跨列时总最小宽度为两列最小尺寸之和，同样能避免项目被挤到超出容器。

关于规范的说明 #

你提到规范未明确auto作为minmax最小值的表现，其实在CSS Grid Layout Module Level 1规范的轨道大小计算章节中，auto作为minmax的最小值时，指的是轨道的「最小内容宽度」（行内轴方向）。但当项目跨多个轨道时，浏览器的实现逻辑没有把跨列项目的min-width正确分配到各个轨道上，导致轨道可以收缩至0——这属于浏览器实现的细节，而非规范的明确规定，目前主流浏览器的表现基本一致。

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