minmax(0, 1fr)比1fr更安全，因1fr等价于minmax(min-content, 1fr)，小屏下min-content不变而可用空间缩小，导致撑破容器；minmax(0, 1fr)显式设下限为0，允许轨道压缩，并需配合子项min-width: 0才能生效。
Grid在小屏上溢出，不是因为写了1fr，而是默认轨道最小尺寸是min-content，而min-content对长单词、URL、图片等“不可断内容”来说可能远超容器宽度——此时浏览器宁可撑破容器，也不压缩内容。
为什么minmax(0, 1fr)比1fr更安全
1fr实际等价于minmax(auto, 1fr)，其中auto在规范中解析为min-content。小屏下可用空间变小，但min-content没变，轨道就只能向外扩张。
-
minmax(0, 1fr)显式把下限设为0，告诉浏览器：“这列可以缩到0，别管内容多宽” - 它作用在轨道定义层，比靠子项样式兜底更底层、更可靠
- 搭配
repeat(auto-fit, ...)时，auto-fit会把空轨道收缩为0，视觉干净；auto-fill则保留空轨道，容易引发横向滚动 - Safari 14.1及更早对
0有兼容问题，可用@supports (grid-template-columns: minmax(0, 1fr)))做特性检测
为什么只改grid-template-columns还不够
光写minmax(0, 1fr)只是开了门，子项得自己愿意进门。网格直接子元素（如.grid > .item）若保持默认min-width: auto，就会顶着min-content不缩，轨道再松也白搭。
- 必须给网格直接子项加
min-width: 0，这是开关，不是可选项 - 如果子项内部是
display: flex或display: grid，它的直接子元素也得加min-width: 0，否则撑开会传导 - 第三方组件（如Ant Design的
Card）默认不带min-width: 0，需手动覆盖 - 用开发者工具检查Computed面板，确认
min-width真实值是否已变成0px，别被其他规则覆盖
小屏下min-width设多少才合理
没有统一值，取决于内容最小可接受尺寸。硬写minmax(320px, 1fr)在375px手机上仍会强制三列，每列只剩约100px，反而加剧挤压。
- 若卡片含200px图+左右16px padding，最小阈值至少是
minmax(232px, 1fr)，再加点余量更稳 - 对纯文本流式卡片，
minmax(0, 1fr)更合适，配合overflow-wrap: break-word防长单词撑破 - 图片类卡片优先用
aspect-ratio: 4/3+object-fit: cover，避免iOS Safari因高度未定导致布局抖动 - 绝对定位子元素（如角标）不受
overflow: hidden影响，父容器必须加position: relative才能裁剪
真正难的不是记住minmax()语法，而是调试时盯住三点：开发者工具里看网格项的「Computed」→min-width是否为0；width实际值是否接近你设的最小阈值；以及有没有隐式横向滚动——尤其在iOS Safari里，它常不显示滚动条，但能拖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
