minmax() 不限制内容最大宽度，仅定义轨道弹性区间；需配合 max-width、word-break 和 white-space 等样式共同控制。
grid-template-columns 里用 minmax() 控制单列最大宽度
直接说结论：minmax() 本身不设“最大宽度”，它定义的是一个范围——最小值到最大值之间的弹性区间。想让网格单元格不无限撑开，关键不是靠 minmax() 的第二个参数硬卡死，而是配合 max-width 或容器约束一起用。
常见错误是写成 minmax(200px, 400px) 就以为单元格绝不会超过 400px，结果发现内容一长（比如超长单词、URL），它照样突破——因为 minmax() 的最大值只是“可用空间上限”，不是“内容截断阈值”。
-
minmax(min, max)中的max指该轨道在分配剩余空间时最多能拿多少，不是对内容的强制裁剪 - 真正起限制作用的是父容器宽度、
overflow设置，以及单元格自身是否设置了max-width或word-break - 如果列定义为
minmax(200px, 1fr)，那它根本没固定上限，“1fr”会随容器变大而扩张
内容溢出时 grid 单元格不收缩的典型场景
这是最常被忽略的一环：CSS Grid 默认不会为文本内容自动换行或压缩。哪怕你写了 grid-template-columns: minmax(150px, 300px) minmax(150px, 300px)，只要某格里塞进一个没空格的长字符串（如 https://example.com/very-long-path-with-no-dashes-or-underscores），它就会把整列撑宽，破坏布局。
- 必须显式加
word-break: break-word或overflow-wrap: break-word到单元格元素上 -
white-space: normal是前提（避免white-space: nowrap锁死换行） - 若内容含内联元素（如
<span>包裹的链接），还需检查它们是否继承了禁止换行的样式
minmax() 和 fit-content()、auto 的行为差异
很多人想“让列宽随内容自适应但不超过某个值”，误以为 minmax(min, max) 就是答案。其实更贴切的是 fit-content(300px) —— 它等价于 minmax(auto, 300px)，但语义更明确：优先按内容宽度，上限 300px。
立即学习“前端免费学习笔记（深入）”；
-
fit-content(300px)：内容窄就缩，宽就顶到 300px，超出部分由换行/溢出处理 -
minmax(100px, 300px)：即使内容只占 50px，这列也不会小于 100px；内容超 300px 时仍可能撑开（取决于其他列是否留有空间） -
auto单独用等同于minmax(min-content, max-content)，极易失控，慎用
实际项目中建议的组合写法
真正在业务代码里稳妥控制列宽，得三层联动：轨道定义 + 单元格样式 + 内容策略。下面这个例子在 Chrome/Firefox/Safari 都表现一致：
/* 网格容器 */
.grid {
display: grid;
grid-template-columns: fit-content(250px) minmax(120px, 1fr);
}
/* 单元格统一处理溢出 */
.grid > * {
word-break: break-word;
overflow-wrap: break-word;
white-space: normal;
}注意：fit-content() 在旧版 Safari（≤15.4）需加 -webkit- 前缀；如果必须兼容更老版本，退回到 minmax(min-content, 250px) + 强制 max-width: 250px 到子元素上。
最易被忽略的点是：grid 轨道宽度控制和单元格内容渲染是两套机制，只调一边大概率失效。别指望光靠 grid-template-columns 就搞定所有宽度问题。
