css grid是实现卡片网格最可靠方案，因其二维布局能力可精准控制行列、响应式重排及gap自动避边；卡片内部须用flex保证等高与底部贴底，避免文字长度不一导致错乱。
用 CSS Grid 实现卡片网格是当前最可靠、最可控的方案，float 和 inline-block 已不推荐；卡片内部结构必须用 flex 布局保证等高与底部贴底，否则文字长度不一时视觉会严重错乱。
为什么不用 flex-wrap + margin 做卡片容器
看似简单，但实际踩坑极多：相邻卡片的 margin-bottom 与 margin-top 会发生外边距合并（margin collapse），导致垂直间距不可控；末尾行卡片右侧多出空白，需额外用 :nth-child 或伪类清除；列数必须手动计算（如 flex: 0 0 calc(33.333% - 20px)），断点一变就要重调。
- gap 属性在 flex 布局中支持度已达标（Chrome 105+、Firefox 104+、Safari 16.4+），但旧版 Safari 仍可能失效
- 如果必须兼容 Safari 15.6 及更早版本，
grid仍是唯一稳妥选择 —— 它的gap自带边缘规避，无需 hack - 别用
margin模拟gap：父容器内边距要额外加，卡片自身还要box-sizing: border-box，维护成本翻倍
grid-template-columns: repeat(auto-fit, minmax(...)) 怎么设才合理
核心不是“写对语法”，而是理解两个参数的实际影响：minmax(280px, 1fr) 中的 280px 是单卡最小宽度，低于该值就强制换行；1fr 表示剩余空间均分，不是固定像素值。
- 移动端小屏（如 375px 宽）下，
280px会导致单列，没问题；但若设成320px，部分安卓小屏会触发横向滚动条 - 桌面端大屏（>1440px）下，
1fr会让卡片无限拉宽，建议配合max-width限制单卡宽度，例如：.card { max-width: 400px; } - 不要写
repeat(3, 1fr)—— 这会锁死列数，失去响应能力；auto-fit才能自动收缩空列，auto-fill则会保留空白轨道
卡片内部内容怎么对齐才不崩
常见错误是给 .card 设死高度或滥用 position: absolute。正确方式是让卡片自身为 flex 容器，靠 flex-grow 和 margin-top: auto 控制主体与底部位置。
-
.card { display: flex; flex-direction: column; height: 100%; }—— 注意必须有height: 100%，否则flex-grow不生效 -
.card-body { flex-grow: 1; }—— 让描述区域撑满可用空间，避免标题和按钮挤在一起 -
.card-footer { margin-top: auto; }—— 按钮永远贴底，不随文字增减跳动 - 图片高度不确定？用
aspect-ratio: 4/3+object-fit: cover，不支持时 fallback 用padding-top: 75%配合position: relative/absolute
hover 动效为什么不能用 margin-top
用 margin-top: -5px 或 top: -5px 做上浮，会触发 layout（重排），尤其在长列表或低端设备上明显卡顿。浏览器无法对其做硬件加速。
- 必须用
transform: translateY(-5px)+transition: transform 0.2s ease - 别漏写
will-change: transform（仅对频繁悬停区域），但不要全局加，会增加内存开销 - 阴影加深用
box-shadow: 0 6px 12px rgba(0,0,0,0.15)，别只改颜色，层次感来自偏移与模糊半径变化 - 如果卡片含图片，悬停时顺便加
filter: brightness(1.05)，比单纯放大更自然
真正难的不是写出第一版卡片，而是当卡片里混入不同长度标题、多行描述、可选操作按钮、甚至动态加载的图片时，还能保持所有卡片底部对齐、悬停不抖动、小屏不溢出 —— 这些细节全靠 grid 的轨道控制力和 flex 的内部弹性，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
