Grid 是实现响应式卡片布局最直接方式，核心为 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 配合 gap 和 align-items: start，兼顾等宽、等高与自适应。
用 display: grid 实现响应式卡片布局最直接
Grid 是目前实现等宽、等高、自适应卡片排列最省力的方式，尤其适合「行数固定、列数随屏幕变化」的场景。
关键不是写多少行 CSS，而是理解 grid-template-columns 和 gap 的组合逻辑：
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))是核心——它让每张卡片最小 280px，最大占满剩余空间，浏览器自动算列数 -
gap: 1rem控制卡片间距，比用margin更干净，不会触发外边距合并或父容器溢出 - 卡片本身不需要设
width或flex，Grid 会统一约束尺寸和对齐 - 如果卡片内容高度不一，加
align-items: start防止底部错位
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
align-items: start;
}用 display: flex 做卡片布局要防“换行断裂”
Flex 更适合单行滚动卡片（如推荐栏），或需要精确控制主轴顺序的场景；但用于多行网格时，容易因 flex-wrap: wrap 导致最后一行卡片左对齐、右侧留白，视觉失衡。
常见补救方式：
立即学习“前端免费学习笔记（深入）”；
- 给容器加
justify-content: space-between或space-around，但仅在卡片数量刚好整除时有效 - 更可靠的是用伪元素占位：
&::after+flex: auto填满最后一行空隙（需配合flex-basis: 280px） - 卡片必须设
flex: 0 0 280px（即不放大、不缩小、基准宽 280px），否则在小屏下可能被压缩变形 - 注意
flex-wrap: wrap后，align-content才控制行间距，align-items控制单行内垂直对齐
.card-flex {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card-flex > * {
flex: 0 0 280px;
}卡片内容高度不一致时，grid 比 flex 更稳
Flex 默认按行内最高卡片撑高整行，导致同一行其他卡片出现多余空白；而 Grid 的 grid-auto-rows 可设为 minmax(min-content, max-content)，让每张卡片独立撑开，再靠 align-items: start 统一对齐顶部。
如果硬要用 Flex 解决等高问题：
- 可以给卡片加
display: flex; flex-direction: column，再让内部内容区域flex: 1占满剩余高度（适合标题+描述+按钮结构） - 但这样无法解决「不同卡片总高度差异大」带来的行高不一致，仍会破坏网格感
- Grid 中用
grid-row: span 2手动跨行是例外操作，日常布局中应避免
移动端适配别只改 minmax() 下限
很多人把 minmax(280px, 1fr) 改成 minmax(140px, 1fr) 就以为适配了手机，结果卡片过窄、文字挤成一团。
真正有效的做法是分断点重置：
- 用
@media (max-width: 480px)把列数强制为 1：grid-template-columns: 1fr - 同时降低
gap到0.5rem，避免小屏上间隙过大 - 卡片内文字字号、padding 也要同步缩放，否则
grid再准也救不了内容溢出 - 不要依赖
viewport缩放来“假装适配”，iOS Safari 对gap和minmax的解析很严格
卡片布局的复杂点不在排列本身，而在内容尺寸、断点响应、交互反馈（比如 hover 阴影、点击态）三者之间的耦合。Grid 能管好第一层，后面两层还得靠内容容器自己收口。
