Grid比flex-wrap更适合卡片布局，因其能严格对齐每行、避免错位，配合响应式列数类和gap-6实现稳定网格；卡片容器需overflow-hidden保圆角，absolute元素需relative定位；hover需显式transition，移动端用active伪类；3D翻转须正确设置perspective-1000、preserve-3d与backface-hidden。
直接用 grid + grid-cols-* + gap 就能搭出稳定、响应式、无需 JS 的卡片布局，比 flex-wrap 更可靠，尤其当卡片高度不一致时。
为什么 grid 比 flex-wrap 更适合卡片网格
flex-wrap 在子项高度不同时容易产生错位或空白断层，而 grid 能保证每行严格对齐，列数由断点类精准控制：
-
grid-cols-1（默认）→ 手机单列 -
sm:grid-cols-2→ 平板双列 -
md:grid-cols-3→ 中屏三列 -
lg:grid-cols-4→ 大屏四列
gap-6 统一管理间距，比在每个卡片上加 mb-6 更干净，也避免最后一行底部多出多余 margin。
卡片容器必须加 overflow-hidden
否则图片、长文本或绝对定位标签（如“新品”角标）会撑破 rounded-xl 圆角，视觉上直接失效：
- 圆角裁剪只发生在容器自身有
overflow-hidden时才生效 - 如果卡片里要放
absolute元素（比如左上角徽章），记得给卡片加relative -
shadow-sm比shadow-md更安全：深色主题下不发灰，移动端渲染更轻量
hover 效果没反应？先查这两个地方
写了 hover:shadow-lg 或 hover:-translate-y-1 却不动，大概率是以下原因：
- 缺过渡声明：
transition-shadow或transition-transform必须显式加，Tailwind 不默认启用 - 父容器有
overflow-hidden（比如带圆角的 grid item），translate-y位移部分会被直接裁掉——此时改用hover:-mt-1更稳妥 - 真机移动端 hover 不触发是正常行为；需要点击反馈，请用
active:scale-95或配合 JS 控制data-active
翻转卡片要真 3D，光写 hover:rotate-y-180 不够
Tailwind 默认的 rotate-y 是二维平面旋转。要实现深度翻转，必须补三个原生属性：
-
perspective-1000必须加在**翻转盒子的父容器**上（不是卡片自身） - 翻转盒子自己加
preserve-3d（需手动在@layer utilities中定义）和relative - 正反两面都得加
backface-hidden，否则背面文字会透过来 - 别用
transition-all，只写transition-transform duration-500，否则 perspective 无效且滚动卡顿
最易被忽略的是 overflow-hidden 和 perspective 的层级关系——它们不在同一元素上就完全不生效，调试时建议先删掉所有其他类，只留这两层结构验证是否起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
