最可靠写法是grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))；auto-fit比auto-fill更实用，避免空轨道；需设子项min-width: 0并配合断行规则防溢出；gap替代margin更安全，兼容旧版需加grid-gap回退；IE11等需@supports降级为flex布局。
grid-template-columns: repeat(auto-fill, minmax(...)) 是唯一靠谱写法
用 grid-template-columns 配合 repeat(auto-fill, minmax(250px, 1fr))) 才能真正让列数随容器宽度自动增减。CSS Grid 的 auto-fill 和 auto-fit 看似一样，但行为关键不同：auto-fill 会保留空轨道（哪怕没内容），auto-fit 会合并空轨道——多数场景该用 auto-fit，否则小屏下可能留出大片空白。
- 最小宽度设太小（如
120px）会导致手机上挤出 4–5 列，文字可读性崩坏 - 最大用
1fr而非固定值，否则无法均分剩余空间 - 别在
minmax()里写max-content或fit-content()，Safari 旧版本会直接忽略整条声明
gap 比 margin 更安全，但得避开 grid-gap 的兼容陷阱
gap 是现代写法，grid-gap 是废弃的旧名。所有主流浏览器已支持 gap（包括 iOS Safari 14.5+），但若项目还需兼容 iOS 13 或 Android WebView 76 以下，就得加一层 grid-gap 回退。注意：两者不能混用，写了 gap 再写 grid-gap，后者会被忽略。
- 用
gap: 1rem统一控制行列间距，比给每个子项加margin干净得多 - 避免用
gap配合justify-content: center—— 中间列可能被意外撑开，视觉错位 - 如果网格内嵌了表单控件（如
<input>），某些安卓 WebView 对gap渲染有偏移，可临时用padding替代
子项不设 width 就别想真“自适应”
很多人以为写了 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 就万事大吉，结果子项内容一长就溢出或换行错乱。根本原因是：Grid 只分配轨道，不约束子项内部尺寸。子项默认是 min-width: auto，遇到长单词、URL 或未断行的中文块，就会撑爆网格。
- 给子项加
min-width: 0，强制允许压缩（尤其含<img>或<iframe>时必需） - 对文本内容加
word-break: break-word或overflow-wrap: break-word，防止单词溢出 - 避免在子项上设
width: 100%—— 在1fr轨道里它会和轨道计算冲突，导致宽度抖动
媒体查询不是必须的，但 fallback 到 flex 必须手动写
纯 CSS Grid 响应式网格在 IE11 或微信内置浏览器（X5 内核旧版）里完全不工作。这时候不能指望自动降级，得用 @supports 显式检测并切换布局：
立即学习“前端免费学习笔记（深入）”；
@supports not (display: grid) {
.grid { display: flex; flex-wrap: wrap; }
.grid > * { flex: 1 1 280px; margin: 0.5rem; }
}-
@supports (display: grid)检测比查 UA 可靠，但注意它不识别gap，所以gap得单独再写一层@supports - Flex fallback 里用
flex: 1 1 280px，别用flex-basis: 280px单独写，否则 Safari 9 会失效 - 别试图用 JavaScript 动态切 layout —— 渲染时机难控，容易闪屏
真正麻烦的不是怎么写响应式，而是当网格里混入异步加载的内容、动态高度卡片、或者需要 JS 测量的组件时，minmax() 的“最小”会失效——这时候只能靠 JS 补一手 resize 监听，或者接受它就是不完美。
