响应式卡片布局应使用 display: grid，因其通过 repeat(auto-fit, minmax(280px, 1fr)) 自动适配列数，避免 float 塌陷和 inline-block 间隙问题；配合 object-fit: cover 控制图片裁剪、transform 实现高性能悬停动效，并采用 min-width 断点渐进增强。
卡片容器用
而不是
或
响应式卡片布局的核心是让列数随屏幕宽度自动变化，
的
模式能直接解决这个问题，而
容易塌陷、
有空白间隙且难以控制换行逻辑。
关键写法示例：
注意点：
表示每列最小 280px，最大均分剩余空间；小屏下自动收缩为单列
会合并空轨道，
则保留空位，多数场景选
别忘了给卡片本身设
，防止内部长文本（如 URL）撑破网格
卡片内图片用
统一裁剪比例
不同尺寸的原始图放进固定高宽的卡片容器时，拉伸变形或留白都会破坏视觉一致性。用
是最轻量的解决方案，不需要 JS 或额外 wrapper。
立即学习
“
前端免费学习笔记（深入）
”；
典型结构：
常见坑：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
只设
不设
，
不生效
默认是
，但若想突出人脸，可改用
IE 不支持
，如需兼容，得 fallback 到 background-image +
悬停动效加
和
，避免重排
卡片悬停抬升+阴影是最常用效果，但用
或
会触发 layout，导致卡顿；
只影响合成层，性能更好。
推荐写法：
注意事项：
务必给
显式声明属性，不要写
，否则字体颜色等意外变化也会被过渡
阴影值别太大，
在移动端已足够，过重的
会影响滚动帧率
如果卡片含
子元素，悬停时可能错位，需检查
层级
移动端断点用
而非
媒体查询
现代响应式开发推荐移动优先，基础样式写默认（小屏），再用
逐步增强。反向用
容易漏掉中大屏适配，也违背渐进增强逻辑。
实际断点建议：
容易忽略的细节：
断点数值别硬
编码
成
，应定义 CSS 变量或预
处理器
变量统一管理
别在断点里重复写整个卡片样式，只覆盖需要变更的属性（如列数、间距、字体大小）
真机测试时发现部分
安卓
浏览器
对
解析异常（含滚动条宽度），卡片宽度慎用
实际项目中最容易出问题的，是卡片内容高度不一致导致网格错位——这不是 CSS 写错了，而是没约束好标题行数、描述截断方式或图片 aspect-ratio。得从数据层或 JS 截断逻辑配合控制，纯 CSS 很难兜底。
display: gridfloatinline-blockgridrepeat(auto-fit, minmax(...))floatinline-block.card-grid {
display: grid;
grid-gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}minmax(280px, 1fr)auto-fitauto-fillauto-fitmin-width: 0object-fit: coverobject-fit.card img {
width: 100%;
height: 180px;
object-fit: cover;
object-position: center;
}width: 100%heightobject-fitobject-position50% 50%center topobject-fitbackground-size: covertransformbox-shadowtopmargin-toptransform: translateY().card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}transitionall0 4px 12pxbox-shadowposition: absolutez-indexmin-widthmax-width@media (min-width: 768px)max-width@media (min-width: 768px) {
.card-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}
@media (min-width: 1024px) {
.card-grid { grid-gap: 2rem; }
}768px100vw100vw