用 display: grid 实现响应式卡片布局更优，通过 repeat(auto-fill, minmax(300px, 1fr))) 自适应列宽、gap 控制间距、object-fit: cover 统一图片裁切、margin-top: auto 固定底部按钮，并为 IE11 提供 inline-block 降级方案。
用 display: grid 快速搭出响应式卡片容器
卡片布局本质是二维排列，grid 比 flex 更适合控制行列对齐和间距。别一上来就写 flex-wrap，尤其当卡片高度不一致时，flex 容易出现错行。
关键点：
-
grid-template-columns用repeat(auto-fill, minmax(300px, 1fr)))实现等宽自适应，比媒体查询更轻量 -
gap控制卡片间距，比给每个卡片设margin更干净（避免首尾多出空白） - 卡片自身用
display: flex; flex-direction: column管理内部标题/内容/按钮的垂直流
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)));
gap: 1.5rem;
}
<p>.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}图片高度不一致？用 object-fit: cover 统一裁切
卡片里常嵌图片，但原始图比例各异，直接设固定高会导致拉伸或留白。别用 height: 100% + width: 100% 强拉。
正确做法：
立即学习“前端免费学习笔记（深入）”；
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
- 给图片容器（如
<div class="card-image">）设固定高，比如height: 180px - 图片本身用
object-fit: cover和object-position: center居中裁切 - 避免用
background-image——语义弱、无法懒加载、SEO 不友好
.card-image {
height: 180px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}卡片底部按钮对齐失效？用 margin-top: auto 推下去
卡片内容长度不同，导致底部按钮位置浮动。别用绝对定位或 JS 计算高度。
利用 Flex 的自动外边距特性：
- 卡片内部用
flex-direction: column - 给按钮加
margin-top: auto，它会把按钮“吸”到底部 - 如果按钮需要左右对齐，再套一层
display: flex; justify-content: flex-end
.card-content {
padding: 1.25rem;
flex: 1;
}
.card-actions {
margin-top: auto;
padding: 0.75rem 1.25rem;
}
.card-actions button {
padding: 0.5rem 1rem;
border: none;
background: #007bff;
color: white;
border-radius: 4px;
}IE11 兼容不了 grid？降级用 inline-block + calc()
真要支持 IE11，grid 必须放弃。别硬上 -ms-grid，兼容性差且写法反直觉。
稳妥降级方案：
- 用
display: inline-block替代grid，配合vertical-align: top防止基线对齐错位 - 列宽用
calc(33.333% - 1rem)（减去左右 margin），注意 IE11 支持calc但不支持gap - 用
@supports not (display: grid)包裹降级样式，现代浏览器优先走 grid
@supports not (display: grid) {
.card-grid {
font-size: 0; /* 消除 inline-block 间隙 */
}
.card {
display: inline-block;
vertical-align: top;
width: calc(33.333% - 1rem);
margin: 0 0.5rem 1rem;
}
}实际项目里最容易漏的是图片裁切后的焦点偏移——比如人物图被裁掉头部。上线前务必检查 object-position 值是否适配关键内容区域。
