网格塌陷源于子项默认最小尺寸限制破坏轨道设定，须为每个网格项设min-width:0或min-height:0；配合minmax(0,1fr)定义弹性轨道、overflow控制内容呈现，并为隐式行设置grid-auto-rows:minmax(48px,auto)。
Grid 网格塌陷不是容器“变矮了”，而是子元素内容撑开轨道、破坏你定义的 grid-template-rows 或 grid-template-columns，导致整体结构变形。核心在于浏览器默认按内容最小尺寸（min-width: auto / min-height: auto）分配空间，而非服从你的轨道设定。
必须给每个网格项显式设 min-width: 0 或 min-height: 0
这是最关键的一步，漏掉就无效：
- 它不是加在 grid 容器上，而是加在每一个直接子元素（即 grid item）上
- 作用是“松绑”浏览器对最小尺寸的强制保护，允许子项收缩以适配轨道
- 仅设
overflow: hidden不起作用——视觉裁剪不改变尺寸计算逻辑 - 若子项内部还用了
display: flex或display: grid，其子元素也得加min-width: 0，否则撑开会传导
用 minmax() 定义轨道弹性边界
避免只写 1fr 2fr 这类裸 fr 单位，它们等价于 minmax(auto, 1fr)，仍会撑开：
- 推荐写法：
grid-template-rows: minmax(0, 1fr) minmax(0, 2fr)—— 允许轨道压缩到 0，再按比例伸展 - 对文本类内容更稳妥：
minmax(min-content, 1fr)，至少显示一个单词，再弹性扩展 - 固定高度内容（如按钮）可用：
minmax(max-content, max-content)锁定不缩不胀
配合 overflow 控制内容呈现方式
min-width: 0 解决“能不能缩”，overflow 决定“缩了之后怎么显示”：
- 单行标题截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis - 多行文本隐藏：
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden - 长英文/数字串折行：
overflow-wrap: break-word（比word-break: break-all更友好） - 图片类内容：额外加
max-width: 100%; height: auto;防止原始尺寸反向撑开
动态内容要防隐式轨道塌陷
JS 动态插入新项时，若没定义 grid-auto-rows，新项会掉进隐式行，而默认隐式行高是 auto，极易塌成一条线：
- 必须设：
grid-auto-rows: minmax(48px, auto)—— 给隐式行设最小可读高度 - 避免写死
grid-auto-rows: 60px，否则内容超长会被裁或溢出 - 占位符元素（如“加载中”）建议用
min-height: 48px而非height，留出伸展余地
