grid-template-columns: 1fr 1fr 在4k屏上撑爆容器，因fr分配剩余空间且无默认最大宽度限制，长内容（如url、图片）触发子项min-width: auto导致列被强制拉宽；须用minmax(0, 1fr)允许列收缩，并配合子项min-width: 0和clamp()控制gap。
为什么grid-template-columns: 1fr 1fr在4K屏上会撑爆容器
因为fr分配的是“剩余空间”，不是固定比例。当子项内容本身很宽（比如未约束的图片、长URL、表格），Grid 默认会让列无限撑开，max-width对容器无效，1fr也拦不住。结果就是横向滚动条出现，或内容被强行拉伸变形。
- 验证方式：临时加
outline: 1px solid red到网格容器，看是否贴边；再检查 computed styles 中实际宽度 - 根本原因不是 Grid 本身，而是子项未设收缩底线——Flex/Grid 都默认不允许子项缩小到内容最小尺寸以下
- 必须给直接子项加
min-width: 0或overflow-wrap: break-word，否则minmax(0, 1fr)也白搭
minmax(0, 1fr)才是大屏 Grid 的安全写法
写repeat(3, 1fr)不如写repeat(3, minmax(0, 1fr))。前者在超宽屏+长内容下必然溢出，后者让每列“可缩至 0”，真正交由浏览器按需分配空间。
-
minmax(0, 1fr)中0是关键——它覆盖了浏览器对min-width的隐式限制（通常为内容最小宽度） - IE 不支持
minmax()，如需兼容，只能退回到1fr 1fr 1fr+ 所有子项强制min-width: 0+word-break: break-word - 别用
minmax(200px, 1fr)应付大屏——最小值会锁死列宽下限，反而加剧撑开风险
大屏下gap不能写死rem或px
gap: 2rem在 4K 屏 + 系统缩放 150% 下可能变成 48px，空白远超设计预期。必须用可控增长方式。
- 推荐：
gap: clamp(12px, 2.5vw, 32px)——小屏保底线，大屏线性增长，超宽屏卡上限 - 更稳妥：
gap: calc(0.5rem + 0.5vw)，兼顾字体可读性与视口伸缩性 - Firefox 对
clamp()早期支持不稳定，务必加@supports (gap: clamp())包裹 - 避免
gap: 5%——百分比基于容器内宽，列数变化时 gap 会突变，布局跳动明显
超宽屏需要max-width兜底，但不能只靠它
仅给网格容器设max-width: 1280px没用——Grid 容器本身不继承该限制，子项仍可突破。真正要约束的是内容流的源头。
- 主容器（最外层 wrapper）必须设
max-width: 1280px; margin: 0 auto;，否则 Grid 再稳也白搭 - Grid 子项如果是卡片/图片/iframe，必须显式加
max-width: 100%，否则它们天然不收缩 - 若用 Tailwind，对应
max-w-screen-xl需查当前版本值——不同版本该 token 指向不同像素值 - 别用
max-width: 100%替代具体数值，它只在父容器窄于自身时生效，对超宽屏完全无效
minmax和clamp都只是纸面功夫。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
