grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 能实现真响应式，因 auto-fit 合并空轨道使子项拉伸填满整行，minmax() 确保每列≥280px且弹性分配剩余空间；写错参数或子项固定宽会导致失效。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能跑通绝大多数设备，不需要媒体查询——但前提是理解它怎么算列数，否则容易写出“看着动、实际卡死”的假响应式。
为什么 auto-fit + minmax() 是核心组合
这个组合不是靠人猜断点，而是让浏览器实时计算：容器够宽才多列，不够就收列。minmax(280px, 1fr) 表示每列必须 ≥ 280px，且 ≤ 它按 1fr 应得的那份剩余空间；auto-fit 则会把没子项的空列直接合并掉，避免小屏下右侧留白或最后一列只剩 1px 宽。
- 写成
auto-fill会导致空列保留，卡片少时右侧大片空白 - 把
1fr换成auto或max-content，列宽失去弹性，auto-fit失效 - 最小值别用
em/rem：字体缩放会干扰列数计算，推荐clamp(160px, 25vw, 300px)
常见错误现象与排查点
布局“不动”或“错位”，往往不是 Grid 写错了，而是子项或父容器悄悄破坏了计算逻辑：
- 子项设了
width: 200px或flex: 0 0 200px：强制固定尺寸，撑破网格定义 - 子项用了
position: absolute或float：脱离文档流，auto-fit看不见它 - 小屏不缩列？检查
minmax()第一个参数是否过大（比如minmax(300px, 1fr)在 320px 宽度下只能塞一列，是 fallback 行为，不是 bug） - DevTools Layout 面板勾选 “Show line numbers”，能直观验证轨道是否被合并
gap 比 margin 更可靠，但有边界条件
gap 是 Grid 原生属性，只作用于轨道之间，不会影响外边距，也不触发父容器滚动条；而用 margin 加间隔，容易在网格边缘多出半倍间距，还得额外写 :first-child 或负边距来修正。
立即学习“前端免费学习笔记（深入）”；
- 统一写
gap: 1.5rem，所有行列间隙一步到位 -
gap不影响子项自身的margin，二者可能叠加造成意外留白 - 旧版 Safari（iOS 16.4 以下 / macOS Monterey）需加
-webkit-gap前缀 - 如果设计稿要求“第一行顶部无 gap、最后一行底部无 gap”，说明你其实不该用 Grid，该换 Flex + wrapping
什么时候真要加 media query
单靠 auto-fit + minmax() 能覆盖 320px–2560px 大部分宽度，但内容结构发生质变时必须干预：
- 卡片标题从一行变两行，按钮位置重排
- 图片宽高比变化大，需要不同
aspect-ratio或 padding-top 技巧兜底 - 桌面端要求最小列宽提至 320px，比新增一套 grid 模板更轻量
- 某些安卓 WebView 对
auto-fit支持不全，可用@supports not (grid-template-columns: repeat(auto-fit, ))降级
真正难的不是写对那行 repeat(auto-fit, minmax())，而是判断哪些样式会悄悄让浏览器“算错”——子项的 width、position、甚至父容器的 overflow，都可能成为隐形干扰源。
