repeat(auto-fill)更适合响应式宫格，因其配合minmax(min-width, 1fr)可动态计算列数、留白可控；而repeat(3)在小屏会强制挤压子项。
为什么repeat(auto-fill)比repeat(3)更适合响应式宫格
固定列数（如repeat(3)）在小屏上会强制挤压子项，导致内容溢出或换行错乱；而repeat(auto-fill)配合minmax()能动态计算最多可容纳几列，空余空间自动撑开，不破坏网格结构。
关键在于它不是“填满容器”，而是“尽可能多地重复一个最小尺寸的轨道”，留白由gap和自动外边距吸收，视觉更可控。
-
auto-fill：即使没内容也保留轨道位置，适合后续 JS 动态插入 -
auto-fit：会收缩空轨道，让现有子项拉伸占满——若需“等宽自适应”选它，但宫格通常要留间隙，auto-fill更稳妥 - 必须搭配
minmax(min-width, 1fr)，否则auto-fill无意义（比如minmax(200px, 200px)就退化成固定宽）
grid-template-columns里minmax()怎么设才不踩坑
常见错误是写成minmax(200px, max-content)或minmax(200px, auto)——这会让浏览器无法确定最大值，最终按minmax(200px, 200px)处理，失去弹性。
正确写法只有一种核心组合：minmax(200px, 1fr)，其中1fr表示“剩余空间均分”，浏览器据此反推最多能放几列。
立即学习“前端免费学习笔记（深入）”；
- 最小值建议用
px或rem，避免用%（% 相对父容器，而父容器宽本身在变，逻辑混乱） - 最大值必须是可伸缩单位：
1fr最常用；max-content仅适用于内容宽度稳定、且你明确要“撑开容器”的场景 - 移动端慎用低于
140px的最小值，否则小屏单列过窄，文字折行难读
如何让宫格子项高度一致，又不写死height
直接设height: 200px会导致文字多的项溢出，文字少的留大片空白；用align-items: stretch（grid 默认）即可让所有子项拉伸到行高一致，前提是行高由内容最多的一项决定。
但如果某项含图片+长文本，另一项只有图标，仍可能高度参差——这时加grid-auto-rows: minmax(120px, auto)，约束每行最小高度，同时允许内容撑高。
- 避免用
align-content: stretch，它作用于整个网格容器，对单行无效 - 若需“卡片式等高+底部按钮对齐”，得在子项内用
display: flex; flex-direction: column+margin-top: auto推按钮到底部 - 不要给子项设
height: 100%，grid 中百分比高度需父容器有明确高度，否则计算为 0
兼容性与 Safari 的auto-fill失效问题
所有现代浏览器都支持repeat(auto-fill)，但 Safari 15.4 之前有个经典 bug：当容器width由max-width + margin: auto控制时，auto-fill可能按视口宽度计算列数，而非实际容器宽度。
修复方式很简单：给容器加width: 100%或显式width: fit-content，打破 Safari 的宽度推断逻辑。
- 别依赖
@supports (display: grid)来判断auto-fill支持——它返回 true，但 bug 仍存在 - 真要兼容 iOS 14 及更早，降级方案是用
display: flex+flex-wrap，配合 JS 监听resize重算flex-basis - 注意
gap在老版 Safari 需加-webkit-gap前缀，但auto-fill本身无需前缀
真正难的不是写出repeat(auto-fill)，而是想清楚最小宽度设多少、要不要留白、内容变化时高度是否可预期——这些决定了用户在折叠屏、横屏 iPad 或高缩放比下的实际体验。细节藏在minmax()的两个参数之间，不在语法糖里。
