直接用float或inline-block做卡片网格易出错：margin合并致间距失控、末行右侧留白、calc单位混用兼容性差；应改用CSS Grid配gap，结合auto-fit与minmax实现可靠响应式布局。
直接用 float 或 inline-block 做卡片网格，现在基本等于给自己埋雷——不是不能跑，而是稍一换设备、加点文字、改个断点，整个布局就错位、间隙失控、底部对不齐。
卡片容器用 flex-wrap + margin 为什么总出问题
看似简单，实则触发三类隐性故障：
-
margin-top和margin-bottom在相邻卡片间会合并（margin collapse），导致垂直间距忽大忽小，尤其在动态插入内容时完全不可预测 - 末尾一行卡片右侧永远多出空白，必须靠
:nth-child或伪元素 hack 清除，断点一变就要重写 - 列数靠
flex: 0 0 calc(33.333% - 1rem)硬算，但calc()在 Safari 15.6 之前不支持单位混用，安卓 WebView 更是常有解析偏差
真正省心的做法是切到 display: grid，用 gap 控制间距，它天然规避外边距合并，且自动避边——不用管父容器 padding，也不用给卡片设 box-sizing。
grid-template-columns: repeat(auto-fit, minmax()) 怎么设才不翻车
这行代码不是复制粘贴就能稳的，两个参数的实际影响常被误读：
-
minmax(280px, 1fr)中的280px是最小宽度，不是“推荐宽度”：iPhone SE 屏宽 375px，减去左右边距后刚好塞下一张卡；设成320px会导致部分安卓小屏横向滚动 -
1fr表示均分剩余空间，不是固定像素——大屏下卡片会被无限拉宽，必须配.card { max-width: 400px; }限制上限 - 别写
repeat(3, 1fr)锁死列数：auto-fit会收缩空列，auto-fill则保留空白轨道；动态卡片流选auto-fit更稳
卡片内部对齐为什么一加文字就崩
本质是没理解 flex 布局对高度的依赖逻辑。常见错误写法包括：
- 给
.card写死height: 300px——flex-grow 失效，文字一超长就溢出或留白 - 用
position: absolute把按钮钉到底部——字体换掉、行高微调，按钮立刻错位；屏幕阅读器也读不到它的语义位置 - 漏写
height: 100%：卡片本身没高度参考，flex-grow: 1就没作用对象
正确链路是：.card { display: flex; flex-direction: column; height: 100%; } → .card-body { flex-grow: 1; } → .card-footer { margin-top: auto; }。注意：这个 auto 是把元素“吸”到底部，不是靠计算余量。
图片加载闪跳、hover 掉帧这些“小问题”其实都指向同一个根因
卡片高度在图片加载完成前是浮动的，浏览器反复重排（reflow）导致滚动条跳动、动画卡顿。这不是 CSS 动画写得不够顺，而是渲染时机没控住：
- 图片容器必须加
aspect-ratio: 16/9（当前支持率 >95%），不支持时 fallback 用padding-top: 56.25%配合绝对定位 - hover 动效禁用
top、margin-top，只用transform: translateY(-4px) scale(1.01)+transition: transform 0.2s ease -
display: block，否则底部默认留 4px 空隙，hover 时整个卡片看起来“歪了”
最易被忽略的一点：所有卡片必须用语义化标签包裹，比如 而非一堆 套娃——后期加无障碍支持、SEO 微数据、自动化测试时，结构混乱的成本远高于写对一个 section 的时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
