Grid列宽被内容撑开的本质是浏览器按min-content自动伸缩，应使用minmax(0,1fr)替代1fr并配合overflow:hidden等样式控制溢出。
Grid网格布局中列宽被内容撑开，本质是浏览器默认按内容自动伸缩列宽。解决思路不是强行设固定宽度，而是用 minmax() 控制弹性范围，并配合 overflow: hidden 截断溢出内容。
用 minmax(0, 1fr) 替代 1fr
直接写 1fr 时，浏览器会先按内容最小宽度（min-content）撑开列，再均分剩余空间。改用 minmax(0, 1fr) 可让列最小宽度为 0，真正实现“有空间就扩展，没空间也不撑开”。
- ✅ 正确写法：
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); - ❌ 避免写法：
1fr 2fr 1fr（仍可能被长文本/图片撑开）
对单元格内容加 overflow: hidden + text-overflow
仅靠 minmax 还不够——如果内容本身不可折行（如长URL、英文无空格字符串），仍会突破容器。需在子元素上显式控制溢出：
- 给文字容器加：
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - 对图片或块级元素，可加：
overflow: hidden;并设width: 100%;配合object-fit: cover;
避免隐式 min-width: auto 干扰
Grid 项默认有 min-width: auto，这会让它抗拒收缩。只需加一句：
-
grid-column: span 1;（显式声明跨度，有助于重置隐式约束） - 或更直接：
min-width: 0;到具体 grid item 上（尤其当它是 flex 容器或含内联元素时）
基本上就这些。核心是两层控制：父容器用 minmax(0, 1fr) 放开收缩下限，子元素用 overflow: hidden 拦住视觉溢出。不复杂但容易忽略。
