Grid容器缩至0宽时minmax(0,1fr)失效，因0被当作auto处理；应改用minmax(min-content,1fr)或加overflow:hidden实现视觉退场。
Grid容器缩到0宽时，minmax(0, 1fr)不生效怎么办
因为minmax()里的0在CSS Grid中会被当作auto处理，不是真正的“可压缩到零”——浏览器会按内容最小尺寸兜底，哪怕容器宽度只剩1px，列也不会塌成0。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用
minmax(min-content, 1fr)或minmax(max-content, 1fr)，明确告诉浏览器“最小就按内容来”，避免隐式兜底 - 如果真要强制收窄，给直接子元素加
overflow: hidden+text-overflow: ellipsis，视觉上“退场”比布局退场更可控 - 别依赖
grid-template-columns: repeat(auto-fit, minmax(0, 1fr)))——0在这里无效，实际等价于minmax(auto, 1fr)
媒体查询里写max-width: 320px，但iPhone SE实际触发不了
因为设备像素比（dpr）和视口缩放会让CSS像素和物理像素错位，320px在dpr=2的设备上可能对应640物理像素，而视口meta设置不当会导致媒体查询基于错误基准计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在且没被JS覆盖 - 用
max-width: 320px不如用max-width: 480px配合grid-template-columns: 1fr回退，覆盖更多小屏场景 - 测试时禁用浏览器缩放，Chrome DevTools里选“Device Scale”为1x，否则模拟失真
grid-auto-flow: dense让回退布局错乱，怎么关掉它
当Grid项被grid-column跨列后又缩容，dense会主动填空，导致顺序跳变、视觉断裂——这不是bug，是它的设计行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 回退样式阶段显式重置为
grid-auto-flow: row，避免自动重排干扰阅读流 - 如果用了
grid-area命名区域，缩容时优先用@container（需启用container query）替代@media，它基于父容器尺寸，不受外部缩放影响 - 不要给Grid项设
grid-row-end: -1之类动态值，缩容时容易越界，改用span 1更稳
用clamp()控制Grid列宽，但IE11和旧Safari报错
clamp()在IE完全不支持，iOS Safari 12.2以下也不认；一旦CSS解析失败，整条grid-template-columns声明会被丢弃，回退成单列或浏览器默认行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须兼容旧浏览器时，用
@supports (width: clamp(0px, 1vw, 100px))包住Grid声明，外面先写纯1fr基础布局 - 别在
clamp()里混用单位如clamp(200px, 50vw, 1fr)——1fr不能参与计算，会整个失效 - 真要兼顾老设备，宁可用JS监听
resize后手动切className，也比CSS fallback不可控强
Grid回退最难的不是写法，而是“缩到哪一步该切样式”——这个阈值没法靠一个max-width拍板，得看内容实际换行点、字体渲染宽度、甚至用户是否开了系统大字体。测的时候别只拉浏览器窗口，真机横竖屏切换多试几次。
