最可靠方案是display: grid配合repeat(auto-fit, minmax(280px, 1fr))和gap，auto-fit收缩空列，minmax保证最小宽且均分剩余空间，gap作用于网格线间不触发外边距合并。
用 display: grid 配合 repeat(auto-fit, minmax()) 和 gap 是最可靠、代码最少的均匀分布方案，Flexbox 在部分场景下容易因最后一行卡片数不足导致视觉不均。
Grid 布局：一行代码控制响应式均匀排列
核心不是“让卡片自己对齐”，而是让网格容器按需生成列轨道，每张卡片自动填入一格。关键参数组合不能拆开：
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))——auto-fit会收缩空列，minmax(280px, 1fr)保证最小宽度且剩余空间均分；写成auto-fill会导致右侧留白 -
gap: 16px必须用，它作用于网格线之间，不会像margin那样在首尾多出空白，也不触发外边距合并 - 卡片自身不要设
width、flex或float，否则干扰网格轨道计算；图片记得加width: 100%; height: auto; - 若卡片高度不一，默认顶部对齐，加
align-items: start更稳妥；需要等高则用align-items: stretch（但可能拉伸内容）
Flexbox 布局：为什么最后一行常“不均匀”？
很多人以为 justify-content: space-between 就能均匀，其实它只对当前行生效。当最后一行只有两张卡片时，左右两边会空出大片区域——这不是 bug，是它的设计逻辑。
- 真正可控的间距方式是
gap: 1rem（现代浏览器支持），但注意：Flex 布局中gap在 Safari 旧版本和 IE 中不生效，得回退到margin+ 负边距技巧 - 卡片宽度必须显式控制，例如
flex: 0 0 calc(33.333% - 1rem)（三列，gap: 1rem），且父容器要设box-sizing: border-box -
flex-wrap: wrap是刚需，漏掉就全部挤在一行，溢出或触发横向滚动 - 响应式断点里别只改
justify-content，重点重设flex-basis值，比如从calc(33.333% - 1rem)改为calc(50% - 1rem)（两列）
常见失效原因：圆角、阴影、溢出被裁切
卡片看着“没均匀”，有时是视觉错觉：圆角不显示、阴影被截断、图片撑破布局，根源往往不在排列逻辑，而在盒模型控制。
- 检查卡片或其父容器是否误设了
overflow: hidden—— 它会把border-radius和box-shadow一起裁掉 - 如果必须裁图，把
overflow: hidden加在内部.card__image这类包裹层上，而不是整个卡片 -
z-index太低可能导致阴影被上层元素遮挡，尤其卡片嵌套在position: relative容器里时 - 所有卡片内文字、图片、按钮的高度要可预测，避免某张卡片因长文本突然变高，拉大整行间距
真正难的不是写出那几行 CSS，而是理解 gap 和 minmax() 的协作关系——它们共同定义了“均匀”的物理边界。一旦这个基础松动，后续所有对齐、响应、视觉一致性都会连锁偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
