该用auto-fit；auto-fit会合并空轨道使卡片自动撑宽，避免小屏空白列和横向滚动，而auto-fill强行填满容器易导致布局异常。
Grid的auto-fill和auto-fit到底该选哪个
用auto-fill还是auto-fit，直接决定卡片堆叠是否“真响应”——auto-fill会按最小轨道尺寸强行填满容器，哪怕后面全是空列；auto-fit则会合并空轨道，让卡片自动撑宽。做响应式卡片堆叠，几乎总是该用auto-fit，否则小屏下会出现看不见的空白列，还可能触发意外横向滚动。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))在手机上显示两列，但右边一列空着、卡片没占满宽度。
-
auto-fill：适合需要“预留槽位”的场景（比如拖拽布局、动态插入），但不适合纯展示型卡片 -
auto-fit：卡片数量不确定、需最大化利用空间时的首选 - 二者语法完全一致，仅词不同，浏览器兼容性无差异（Chrome 57+/Firefox 52+/Safari 10.1+）
minmax()里两个值设成一样会怎样
写成minmax(300px, 300px)看似稳妥，实则锁死列宽，彻底放弃响应能力——它等价于固定300px，1fr根本不会生效。响应式卡片的核心，是让第二参数为1fr，才能随容器缩放伸缩。
使用场景：卡片内容高度不一，但希望宽度自适应且保持整齐网格；同时要避免小屏下单卡过窄（比如低于240px）。
- 正确写法：
minmax(240px, 1fr)，保障最小宽度，剩余空间均分 - 错误写法：
minmax(240px, 240px)或minmax(240px, 300px)，失去弹性 - 注意：如果父容器本身有
padding或gap，实际可用宽度会减少，建议用calc()微调（如minmax(240px, calc(1fr - 16px))）
卡片内部文字换行和图片裁剪经常错位
Grid只管外层布局，卡片内部若没约束，文字溢出、图片拉伸、高度不一致都会导致“堆叠”变“参差”。尤其gap存在时，视觉错位更明显。
典型错误现象：三张卡片，中间那张因标题多一行而变高，下方卡片整体下移，形成阶梯状。
- 给卡片加
display: flex; flex-direction: column，再用flex: 1让内容区撑满剩余高度 - 图片统一用
object-fit: cover+ 固定aspect-ratio（如aspect-ratio: 4/3），避免拉伸变形 - 标题文字用
display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden限制行数 - 慎用
align-items: stretch（Grid默认行为），它会让所有卡片等高，但若内容差异大，反而暴露空白
IE11兼容不了Grid怎么办
IE11对auto-fit/auto-fill完全不支持，连带minmax()也无效。不是加个@supports就能绕开的问题，得降级方案。
性能影响：Flexbox降级方案比Grid稍重一点，但现代设备感知不到；关键是维护两套逻辑容易漏改。
- 用
@supports not (grid-template-columns: repeat(auto-fit, 1fr)))包裹Grid样式，内部写Flexbox回退 - Flexbox方案用
flex-wrap: wrap+flex-basis: calc(33.333% - 16px)模拟三列，配合media query切列数 - 别忘了给IE11单独加
margin模拟gap，因为IE不支持gap - 真实项目中，如果目标用户仍有显著IE11流量，优先考虑用
display: grid配fallback类名，而非依赖特性检测
最易被忽略的一点：Grid的gap在嵌套子网格中不会继承，而Flexbox的margin容易算错方向；测试时一定要用真实设备缩放，而不是只看DevTools模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
