最直接的响应式卡片栅格方案是用 display: grid 配合 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 和 gap，避免写死列数；需分区域控制卡片内容高度一致性，图片用 aspect-ratio 或 object-fit，IE11 回退用 flex-wrap，容器查询需父容器声明 container-type: inline-size。
用 display: grid 实现响应式卡片栅格最直接
不用框架也能做干净的卡片栅格，核心就是 grid-template-columns 配合 minmax() 和 auto-fit。浏览器原生支持，无额外依赖，兼容性到 Chrome 66+/Firefox 63+ 就够用。
常见错误是写死列数，比如 grid-template-columns: repeat(3, 1fr)，结果小屏上卡片被压扁、文字换行混乱。正确做法是让列数随容器宽度自动调整：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}-
minmax(280px, 1fr)表示每列最小 280px（保障卡片内容可读），最大均分剩余空间 -
auto-fit会压缩空列，比auto-fill更适合卡片——后者会在容器里预留“看不见的列”，导致卡片间距异常 -
gap推荐用rem或em，避免在缩放或字体调整时断裂
卡片内部结构要控制高度一致性
栅格排好后，卡片内容长度不一会导致整行错位——比如第一张卡有 3 行标题 + 图片 + 摘要，第二张只有标题，视觉上就“悬空”。这不是栅格问题，是卡片自身没约束。
解决方式不是给所有卡片设固定高（破坏可访问性和响应性），而是分区域控制：
立即学习“前端免费学习笔记（深入）”；
- 标题区域用
flex+min-height锁定基础高度，多行文本用display: -webkit-box截断（仅限摘要类短文本） - 图片统一用
aspect-ratio: 16/9或object-fit: cover+ 固定容器高，避免拉伸变形 - 绝对禁止对
.card设置height: 100%—— grid 子项默认已拉满，再设高可能触发双滚动条或溢出隐藏
IE11 兼容需求下别硬扛 grid
如果必须支持 IE11，display: grid 不能用（仅支持旧语法，且无 auto-fit）。这时候退回 display: flex + flex-wrap 是更稳的选择：
.card-grid {
display: flex;
flex-wrap: wrap;
margin: -0.75rem; /* 负边距抵消子项的 gap */
}
<p>.card-grid > <em> {
flex: 1 1 280px; /</em> 基础宽度 280px，可伸缩 */
margin: 0.75rem;
}-
flex: 1 1 280px中第一个1是flex-grow，第二个是flex-shrink，确保小屏下能收缩但不过度挤压 - IE11 对
flex-basis的百分比解析有 bug，所以这里必须用px或em，不能写calc(33.333%) - 注意
flex-wrap在 IE11 下对子项margin的处理不稳定，用负父容器边距比依赖gap更可靠
用 @container 做容器查询（Chrome 111+）
当卡片嵌在动态宽度的侧边栏或弹窗里，视口宽度不再决定栅格列数，此时 @media 失效。现代方案是容器查询：@container + container-type: inline-size。
前提是父容器得声明类型：
.card-container {
container-type: inline-size;
}
<p>@container (min-width: 400px) {
.card-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
}</p><p>@container (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}
}- 必须给直接父容器加
container-type，不能跳级；否则查询完全不触发 - 目前仅 Chromium 系支持，Firefox 和 Safari 仍需前缀或暂不启用
- 别和
@media混用同一套断点值——容器宽 ≠ 视口宽，数值要单独调试
真正麻烦的从来不是怎么写栅格，而是卡片内容高度不可控、图片加载时机打乱布局、或者在嵌套路由里忘了重置容器查询上下文。
