viewport标签缺失导致响应式网格失效，因浏览器默认以980px渲染，使@media和grid-template-columns: repeat(auto-fit, minmax())等规则无法触发；该标签必须硬编码于中，且content="width=device-width, initial-scale=1.0"。
viewport 标签漏了，整个网格就失效
所有响应式网格布局的前提是移动端能正确识别视口宽度。没写 <meta name="viewport" content="width=device-width, initial-scale=1.0">，浏览器会以约 980px 宽度渲染页面，@media 根本不触发，grid-template-columns: repeat(auto-fit, minmax(...)) 看起来写了，实际根本没生效。
这个标签必须硬编码在 里，不能用 JS 动态插入；也不能加 user-scalable=no ——它破坏可访问性，且部分安卓 WebView 对 initial-scale=1 解析不准，可加 maximum-scale=1 做双保险，但要保留 pinch-zoom 能力。
grid-template-columns: repeat(auto-fit, minmax()) 怎么写才不崩
常见错误是直接抄 minmax(300px, 1fr) 往手机上套，结果卡片叠成竖线、文字换行错乱。关键不是“列数固定”，而是让最小列宽能撑住内容又不溢出。
-
minmax(240px, 1fr)是安全起点（兼容 iPhone SE 宽度），内容多可上浮到280px或320px - 用
auto-fit（不是auto-fill）：空列自动收缩，剩余空间均分，避免留白 - 必须配
gap控制间距，别用margin模拟——否则 padding/margin 挤压后，minmax()的计算基准就偏了 - 如果卡片含固定高图片，得同步加
img { width: 100%; height: auto; }，否则撑破网格项
卡片 hover 导致跳动，根源不在动画本身
鼠标移入后下方卡片“弹一下”，不是因为 transform: scale() 写错了，而是卡片没预留高度空间，重绘时触发整体重排。
- 统一设
min-height（如min-height: 180px）锚定基线，比靠height更灵活 - hover 动画优先用
transform和opacity，避免改width、margin这类触发布局的属性 -
box-shadow改用filter: drop-shadow()，更稳妥；will-change: transform只对高频交互卡片启用，别全局加 - 若用了
grid-auto-rows，hover 改变高度会直接影响后续行位置——此时应改用显式grid-template-rows或放弃动态行高
IE11 或旧 Safari 下 gap 不生效怎么办
gap 在 IE11 和 Safari 15.4 之前不支持（尤其 inline-grid 场景），但别退回到 flex-wrap + margin 模拟，那会破坏网格语义和对齐逻辑。
- IE10+ 兼容方案：用
grid-column-gap和grid-row-gap替代gap - Safari 旧版：确保容器是
display: grid（不是inline-grid），否则gap直接忽略 - 盒模型必须统一为
box-sizing: border-box，否则padding/border额外加宽，列宽计算全乱 - 别给参与栅格计算的元素（如
grid-item）直接加margin-bottom，干扰布局流；间距只交给gap或其回退属性
真正卡住进度的，往往不是怎么写 repeat()，而是 box-sizing 漏了、viewport 忘了、gap 在旧浏览器失效却没回退——这些细节不处理，再漂亮的网格也会在某台设备上突然错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
