首选display: grid配合repeat(auto-fit, minmax(280px, 1fr))实现自适应列数，避免float和inline-block错行与间隙问题；用gap控间距、aspect-ratio保图比、-webkit-line-clamp截多行文本，并通过@media (hover: hover)优化悬停兼容性。
卡片容器用 display: grid 而不是 float 或 inline-block
浮动和内联块在响应式场景下容易错行、间隙难控，且需要额外清除浮动或处理垂直对齐。Grid 天然支持列数自适应，配合 minmax() 和 auto-fit 可以让卡片按容器宽度自动换行并填满空间。
- 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 最小宽度 280px，最大均分剩余空间 - 避免写死列数如
repeat(3, 1fr)，否则小屏会溢出或留大片空白 - 加
gap: 1rem控制卡片间距，比用margin更稳定（不会在首尾多出空隙）
图片宽高比固定用 aspect-ratio + object-fit
卡片里的图常因原始尺寸不一导致高度参差，拉伸布局。现代方案是用原生 aspect-ratio 配合 object-fit: cover，不用 JS 计算或伪元素占位。
img { aspect-ratio: 4/3; object-fit: cover; width: 100%; height: auto; }- 旧浏览器兼容：可降级为
padding-top: 75%的伪元素方案，但需额外 wrapper 和绝对定位 - 别只设
height: 200px—— 小屏下图片会被强行裁剪或拉伸
文字截断要兼顾多行和响应式断点
标题或描述过长时，单行 text-overflow: ellipsis 不够用；多行截断又容易在不同屏幕下截断位置突变。
- 安全做法：用
-webkit-line-clamp（配合display: -webkit-box），并在关键断点重置行数，例如：@media (max-width: 768px) { .card__desc { -webkit-line-clamp: 2; } } - 避免全局设
line-clamp: 3—— 小屏字体相对变大，三行可能撑出卡片边界 - 纯 CSS 多行截断不支持 Firefox 旧版本，若需强兼容，得用 JS 或服务端截断
悬停效果在触摸设备上会“卡住”
很多响应式卡片加了 :hover 改变阴影或抬升，但在平板或手机上首次点击后状态残留，体验奇怪。
立即学习“前端免费学习笔记（深入）”；
- 解决方案：用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，排除触屏主设备 - 或者统一用
:active做轻量反馈，比如transform: translateY(-2px)，所有设备都触发一次 - 别依赖
transition: all .3s—— 字体大小、颜色、阴影同时过渡易造成渲染抖动，建议只过渡transform和opacity
真正麻烦的是内容高度不一致时的网格对齐——align-items: start 是底线，但描述长度差异大时，仍得靠 JS 补齐高度或改用 Flex + JS 行高同步。CSS Grid 还没到能全自动搞定一切的程度。
