grid子项缩不进指定轨道的根本原因是其默认min-width:auto锁死收缩能力；必须显式设置min-width:0解除内容最小宽度限制，再配合max-width:100%、overflow:hidden等规则才能生效。
必须显式写 min-width: 0 或 min-height: 0，否则 Grid 子项的默认 min-width: auto 会锁死收缩能力。
为什么 Grid 子项缩不进指定轨道？
Grid 容器里直接子元素默认有 min-width: auto（不是 0），它会强制保持“内容能放下的最小宽度”——哪怕你设了 grid-template-columns: 1fr 1fr，一张宽图或一段长英文照样把整列顶开。这不是 bug，是 CSS 规范行为。
这个隐性限制和 Flex 布局里的逻辑一致，但很多人在 Grid 里忘了重置。
- 只改
width或max-width没用，min-width: auto优先级更高 -
overflow: hidden不能替代min-width: 0，它只裁剪，不释放收缩空间 - 如果子项是图片、
<input>或<button></button>这类固有尺寸元素，问题更明显
怎么写才真正生效？
给子项加 min-width: 0 是起点，不是终点。它只是解除浏览器自动施加的“最小内容宽度锁”，之后你才能用其他规则控制尺寸。
- 单行生效写法：
min-width: 0（必须写在子元素上，不能只写在容器） - 配合
max-width: 100%防图片撑破：img { min-width: 0; max-width: 100%; height: auto; } - 若需同时控制高度，加
min-height: 0（尤其当父容器是display: grid且设了grid-template-rows时） - 别用
min-width: unset或min-width: initial—— 它们会回退到auto，等于没写
常见踩坑场景
这些地方最容易漏掉 min-width: 0，导致布局意外拉伸：
- 用
grid-template-areas做响应式重组时，子项写了grid-area: sidebar，但没加min-width: 0→ 小屏下侧边栏仍占固定宽度，挤垮主内容 - 轨道用了
minmax(min-content, 1fr)，但子项没设min-width: 0→min-content被放大成整个单词宽度，无法压缩 - 子项是
display: flex容器，内部又嵌套 Grid → 外层 Grid 子项要min-width: 0，内层 Flex 项目也得单独加 - 用
fr单位分列，但其中一列塞了<table> → 表格默认不收缩，必须对 <code>table元素本身加min-width: 0和table-layout: fixed真正起效的关键不是“加了什么”，而是“先解除了什么”。
min-width: 0看似简单，却是 Grid 布局中控制收缩行为最常被跳过的那一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
