核心是用 repeat(auto-fit, minmax(280px, 1fr)) 实现无媒体查询响应式网格：auto-fit 自动收缩空列，minmax 设单列最小宽度而非全局断点，gap 安全控间距，需注意 safari/firefox 兼容性及 box-sizing。
用 grid-template-columns: repeat(auto-fill, minmax(...))) 替代媒体查询
核心是让 Grid 自己根据容器宽度“算”出该放几列，而不是靠断点硬切。关键不在媒体查询，而在 minmax() 和 auto-fill 的组合行为。
常见错误是写成 repeat(3, 1fr) —— 这直接锁死列数，完全没响应性；或者只写 minmax(250px, 1fr) 却漏掉 auto-fill，导致 Grid 不会主动填充剩余空间。
-
minmax(280px, 1fr)表示每列最小 280px，大了就均分剩余空间（不是固定最大值） -
auto-fill让 Grid 尽可能多地“尝试”放入列，哪怕最后留空；auto-fit则会把空列收缩掉，更常用 - 必须配合
width: 100%或明确的父容器宽度，否则 Grid 容器可能不收缩，导致列数始终为 1
为什么 auto-fit 比 auto-fill 更适合卡片布局
auto-fill 会在容器里塞满“占位列”，哪怕内容为空，容易撑开高度或破坏对齐；auto-fit 会把空列合并掉，让真实卡片自动占据可用列宽，视觉更紧凑。
典型场景：一个卡片列表在桌面端显示 4 列，缩到平板时自动变成 2 列，再小变 1 列——这个过程完全由容器宽度驱动，不需要 JS 或媒体查询干预。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)))→ 小屏下仍保留多列轨道，只是卡片被挤压 - 正确写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) - 注意：IE 不支持
auto-fit，如需兼容 IE，得换方案（比如 Flex +flex-wrap）
卡片内边距和间隙怎么不破坏网格计算
gap 是安全的，它不参与 minmax() 计算；但卡片自身的 padding 或 margin 会占用空间，可能导致“明明设了 280px 最小宽度，却只排了 2 列”的问题。
根本原因是：Grid 轨道宽度 = 容器宽度 − 所有 gap 总和，然后才去分配；而卡片内部的 padding 是在轨道内消耗空间的，不影响列数判断，但会让内容显得拥挤。
- 统一用
gap: 1rem控制卡片间距，别用margin - 卡片
width: 100%，内部内容用padding，避免设固定宽高 - 如果卡片有边框，记得加
box-sizing: border-box，否则边框会额外加宽
Firefox 和 Safari 对 minmax() 的兼容细节差异
Chrome 和新版 Edge 行为一致，但 Safari ≤15.6 和旧版 Firefox 在处理 minmax(min, 1fr) 时，有时会把 1fr 当作“尽可能大”，导致小屏下单列卡片异常撑宽。
这不是 bug，而是对规范中“1fr 是否应受 min 约束”的解释差异。实际项目中，只要最小值设置合理（比如不小于 240px），基本不会触发。
- 稳妥做法：把
minmax(280px, 1fr)改成minmax(280px, max-content)，但后者失去弹性伸展能力 - 更推荐：加一行
grid-auto-rows: 1fr配合auto-fit，能缓解 Safari 的拉伸倾向 - 真要压测兼容性，用
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))); gap: 1rem;在 Safari 15.6 上跑一遍就行，多数情况没问题
minmax() 里那个 “min” 是给单列设的底线，不是给整个网格设的断点；一旦卡在这里，后面所有调试都是在补漏洞。 
