CSS Grid用minmax(auto,33%)未生效？如何实现左列自适应不超过33%宽

你碰到的问题不是minmax的用法错了，而是第二列使用auto值带来的连锁宽度计算问题，和你理解的偏差关系不大。

Grid计算轨道宽度时有固定的优先级逻辑：

• auto作为轨道宽度值时，轨道尺寸完全由自身内容决定，不会主动吸收容器的剩余空白空间，有多少内容就占多宽
• fr作为轨道宽度值时，轨道会主动占据容器内、扣除其他固定/内容驱动轨道宽度之外的所有剩余空间

你之前写的grid-template-columns: minmax(auto, 33%) auto，实际计算流程是这样的：

1. 先算第二列：宽度刚好匹配自身内容的长度，不额外占用空间
2. 再算第一列：允许的宽度范围是「内容最小宽度 ~ 容器总宽度的33%」
3. 这时候容器里剩下的空白空间没有其他轨道主动承接，Grid就会把这些空白空间分给可以伸缩的第一列，直到第一列撑到自己允许的最大上限（也就是容器宽度的33%）

这就是为什么哪怕第一列只有很短的文本，也会被硬拉到33%宽度的核心原因。

只需要把第二列的auto值替换成1fr，让第二列成为主动吸收剩余空间的轨道，第一列就会严格按照自身内容宽度伸缩，同时守住33%的最大宽度限制，minmax本身的参数完全不需要调整：

.main {
  display: grid;
  /* 仅修改第二列的宽度值即可 */
  grid-template-columns: minmax(auto, 33%) 1fr;
  /* 可选：给两列加间隙，避免内容贴边 */
  gap: 1rem;
}

.firstcol {
  background: lightgreen;
  /* 可选配置：长文本在被压缩到33%宽度时自动换行，避免溢出 */
  overflow-wrap: break-word;
}

.secondcol {
  background: lightblue;
}

• 第一列内容较短时：宽度完全适配内容本身的大小，不会硬撑到33%的上限
• 第一列内容过长、按内容计算的宽度超过容器总宽度33%时：第一列会被自动限制到33%的最大宽度，长文本在列内正常换行
• 所有没有被第一列占用的剩余空间，会全部分配给第二列

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