正确写法是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))；需配合卡片flex布局、统一用gap不用margin、图片加overflow隐藏与object-fit、hover前设min-height锚定基线。
grid-template-columns: repeat(auto-fit, minmax()) 怎么写才不崩
直接抄别人代码里的 minmax(300px, 1fr) 很容易在手机上崩——卡片被压成细条、文字换行错乱、甚至横向滚动。关键不是数值本身，而是它和容器宽度的匹配关系。
-
240px是安全下限（适配 iPhone SE 宽度），280px更适合带标题+描述的常规卡片，300px偏保守，别盲目往上堆 -
auto-fit必须用，auto-fill会保留空轨道，小屏下卡片被硬塞进“看不见的列”里 - 别给父容器加
width: 100%同时又用1fr，这会让 Grid 在窄屏下算出负值或异常缩放 - 如果卡片数量极少（比如只有 1–2 张），
auto-fit会自动把剩余空间均分给现有卡片，不会留白
卡片内部高度失控怎么 fix
Grid 只管列数和行对齐，单张卡片内部结构失控，就会出现：图片撑高、文字截断位置诡异、按钮飘在半空——这不是 Grid 的问题，是卡片自己没立住。
- 给
.card设display: flex; flex-direction: column; height: 100%; - 主体文字区域（比如
.card-body）加flex: 1或flex-grow: 1吸收剩余空间 - 底部按钮用
margin-top: auto贴底，别用position: absolute——后者脱离文档流，Safari 下尤其容易错位 - 图片必须包一层
overflow: hidden容器，再设img { width: 100%; height: auto; object-fit: cover; }，否则加载抖动会触发重排，等高失效
gap 和 margin 混用为什么总出问题
很多人一边写 gap: 1.5rem，一边又给 .card 加 margin: 1rem，结果间距翻倍、小屏下卡片挤到一起、甚至溢出容器——这是最常被忽略的底层冲突。
-
gap是 Grid 原生属性，只作用于网格项之间，不触发外边距合并，也不受子元素影响 -
margin是通用布局属性，加在.card上会干扰 Grid 的轨道计算逻辑，尤其在auto-fit动态重排时表现不可预测 - 旧教程里用
:not(:last-child)清除末项 margin，现在纯属冗余；gap已覆盖全部需求 - 如需兼容 IE11，可用
grid-column-gap/grid-row-gap替代，但别为它妥协现代写法
hover 动效卡顿或跳动的真实原因
鼠标一移上去，下方卡片“弹一下”，不是性能差，是布局没锚定基线。Grid 本身不卡，但动效改了渲染层，而容器没预留空间。
- 给
.card加min-height（比如min-height: 180px），让 hover 前后基线一致 - 优先用
transform: scale(1.02)和opacity，避免触发布局重算；box-shadow改用filter: drop-shadow()更稳妥 - 别全局加
will-change: transform，只对高频交互卡片启用，否则内存开销明显 - 如果用了
grid-auto-rows，hover 时高度变化会直接影响后续行位置，此时应改用显式grid-template-rows或放弃动态行高
repeat(auto-fit, minmax())，而是图片没约束、文字没截断、hover 没锚定——这些细节不处理，再“响应式”的布局也会在真机上露馅。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
