响应式卡片列表应使用 display: grid 而非 float 或 inline-block，核心是 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 实现列数自适应，配合 width: 100%、align-items: start、object-fit: cover 和 aspect-ratio 等确保布局稳健与视觉一致。
卡片容器用 display: grid 而不是 float 或 inline-block
响应式卡片列表的核心是让列数随屏幕宽度自动变化，grid 的 repeat(auto-fit, minmax(...)) 模式能直接解决这个问题。用 float 或 inline-block 会触发换行不可控、间隙难处理、垂直对齐错乱等问题，尤其在不同字体渲染下容易出现“最后一行塌陷”。
推荐写法：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
注意：minmax(280px, 1fr) 中的 280px 是单卡最小宽度，低于该值时列数减少；1fr 表示剩余空间均分——这比固定列数（如 repeat(3, 1fr)）更健壮。
卡片自身需设 width: 100% 并避免固定高度
卡片内容长度不一（比如标题行数、描述字数差异）时，若给卡片设固定 height，会导致文字截断或图片拉伸。更稳妥的做法是让卡片自然撑开，靠 align-items: start 统一对齐顶部。
-
width: 100%必须显式声明，否则在某些 Flex/Grid 环境下卡片可能不占满分配到的网格轨道 - 图片建议用
object-fit: cover+ 固定宽高比容器（如aspect-ratio: 4/3），避免拉伸变形 - 文字溢出用
display: -webkit-box控制行数，但仅限纯文本区域，别套在整张卡片上
媒体查询只用于微调断点，不用于定义主布局
主响应逻辑交给 grid 自动处理，媒体查询只做补充：比如在超小屏（max-width: 480px）下调小 gap、缩放字体、隐藏次要信息。如果发现需要为 sm/md/lg 各写一套 grid-template-columns，说明 auto-fit 没配好，或者卡片最小宽度设得不合理。
常见误配：
@media (max-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, 1fr); /* ❌ 覆盖了 auto-fit，失去弹性 */
}
}
正确做法是保持 auto-fit，只调参数：
@media (max-width: 480px) {
.card-grid {
gap: 1rem;
}
.card {
font-size: 0.9em;
}
}
IE11 兼容需额外处理 grid 回退
如果项目必须支持 IE11，display: grid 会被忽略，此时卡片会垂直堆叠成单列。可以加一层 display: flex 回退，但要注意 IE11 的 flex-wrap 对 minmax 无感知，必须配合 flex-basis 和媒体查询硬编码列数。
简单回退方案：
.card-grid {
display: flex;
flex-wrap: wrap;
margin: -0.75rem; /* 抵消子项 margin */
}
.card-grid > * {
flex: 0 0 calc(33.333% - 1.5rem);
margin: 0.75rem;
}
@media (max-width: 768px) {
.card-grid > * {
flex-basis: calc(50% - 1rem);
}
}
@media (max-width: 480px) {
.card-grid > * {
flex-basis: 100%;
}
}
这种写法无法做到真正的“自动列数”，但至少保证多列显示不崩溃——真正麻烦的是卡片内图片和文字的对齐一致性，IE11 下 object-fit 和 aspect-ratio 都不支持，得用 padding-top 百分比技巧模拟宽高比。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
