选auto-fit还是auto-fill取决于布局需求：auto-fit收缩空轨道使内容拉伸填满容器，适合卡片流式布局；auto-fill保留空轨道维持格子感，适合仪表盘、日历等需固定列数的场景。
grid-template-columns 的 auto-fit 和 auto-fill 怎么选
选 auto-fit 还是 auto-fill，取决于你想要“填满容器”还是“保留格子感”。auto-fit 会把空轨道收缩掉，让剩余列均分空间；auto-fill 则保留所有生成的轨道（哪怕没内容），留白更均匀。
九宫格类卡片布局常用 auto-fill，因为视觉上需要明确的“格子边界”，哪怕只放 4 张图，也保持列数稳定、间隙一致；而内容流式列表（如博客摘要）更适合 auto-fit，避免小屏下出现大量空白列。
两者在 CSS 中行为差异极小，但一旦混用或误配 minmax() 上限（比如写成 minmax(240px, 300px)），就会卡死弹性，失去响应能力。
minmax() 里两个参数的实际约束力
minmax(240px, 1fr) 不是“最小 240px、最大 300px”那种固定区间，而是“轨道宽度不得低于 240px，超出部分按比例分配”。第二个值必须是可伸缩单位（1fr、min-content、max-content），不能是像素值。
立即学习“前端免费学习笔记（深入）”；
- 写成
minmax(240px, 300px)：浏览器直接忽略该轨道定义，回退到单列或报错 - 写成
minmax(240px, 1fr)：小屏下若容器宽 overflow: auto） - 写成
minmax(min-content, 1fr)：适合文字主导的卡片，但可能因长单词撑开列宽，需配合overflow-wrap: break-word
gap 值为什么不能用 rem 或 %
gap 是 Grid 专用间距属性，计算时机早于字体继承和百分比解析。用 gap: 1rem 会导致 Safari 15.4 及更早版本重绘异常，视觉上出现“缝隙抖动”；用 gap: 5% 则被多数浏览器忽略（规范未定义 % 在 gap 中的基准）。
安全写法只有带绝对单位的值：gap: 12px、gap: 0.75em（仅当父元素 font-size 稳定时可用）。
特别注意：如果容器用了 display: inline-grid，Safari 15.4 之前完全不支持 gap，必须改用 display: grid。
子项不守规矩，网格再对也没用
Grid 只划分轨道，不控制内容。一张没设 max-width: 100% 的图片、一个没加 overflow-wrap: break-word 的长 URL、一个 Flex 子项没写 min-width: 0，都会从局部撕裂整个网格的“无缝感”。
每个卡片级子项应强制兜底：
-
max-width: 100%+height: auto控制图片 -
overflow-wrap: break-word+word-break: break-word处理长文本 - 若内部用 Flex，外层加
min-width: 0防止 flex item 拉伸 - 统一设
box-sizing: border-box，避免 padding/border 加算进宽度
真正难的不是写出那行 repeat(auto-fit, minmax())，而是所有子项都得主动退让——没有哪个属性能替你扛住原始尺寸的冲击。
