必须同时设置minmax(0, 1fr)和子元素min-width: 0才能解决网格撑开问题，仅改轨道定义无效；子项内容显示还需额外声明white-space、overflow等规则。
给 Grid 容器加 overflow: hidden 本身拦不住溢出——真正起效的是 minmax(0, 1fr) 和网格直接子项的 min-width: 0 同时生效；漏掉任一，内容照常撑破容器。
为什么 minmax(0, 1fr) 必须配 min-width: 0
浏览器默认给网格子项设 min-width: auto（等价于 min-content），比如一个无空格长 URL 或固定宽图片，会死顶着不缩。哪怕轨道已声明可缩到 0，子项不配合，轨道就缩不动。
必须同步改两处：
- grid-template-columns: minmax(0, 1fr) minmax(0, 2fr)
- .grid > *（或具体类名）加 min-width: 0
嵌套 Grid/Flex 的直接子元素也得加这句，否则撑开会传导下去
auto-fit 和 auto-fill 别混用
写 repeat(auto-fill, minmax(0, 1fr)) 会在窄屏下保留空轨道，导致视觉上横向滚动；auto-fit 才会把空轨道收缩归零，让现有列均分空间。
正确写法：grid-template-columns: repeat(auto-fit, minmax(0, 1fr))
若需保底宽度（如卡片最小 320px），用 minmax(320px, 1fr)，但别全局滥用——头像列可用 minmax(min-content, 1fr) 单独处理
图片、<pre>、表格这些“硬茬”最容易漏掉约束
它们有固有尺寸，不加限制会直接突破轨道：
- img 必须加 max-width: 100% + height: auto
- <pre> 要配 overflow-x: auto 或 white-space: pre-wrap
- <table> 得设 width: 100% + table-layout: fixed
所有这些都依赖前置的 min-width: 0，否则 max-width 无效
立即学习“前端免费学习笔记（深入）”；
最常翻车的是嵌套层级判断：该在 Grid 容器加？某条 grid-template-rows？还是某个 grid-area 的直接子元素？漏一层，溢出就还在那儿。
