卡片高度不一致需用flex-column+flex-grow+margin-top:auto统一；图片用aspect-ratio防重排；间距统一用gap避免外边距合并。
卡片高度不一致导致视觉错乱
文字长度不同、图片加载延迟或字体渲染差异，会让卡片自然撑开高度不一。用户一眼就能看出“这行卡片歪了”，尤其在服务介绍、团队成员这类强调齐整的场景里，问题更刺眼。
根本不是内容本身的问题，而是布局没做二次约束——grid只管列数和轨道对齐，不管单张卡片内部怎么分配空间。
- 给每张卡片加
display: flex; flex-direction: column; height: 100%; - 主体区域（比如描述文字）用
flex-grow: 1或flex: 1吸收剩余空间 - 底部按钮或图标用
margin-top: auto推到底部，别用position: absolute - 确保父容器（如
.card-grid）设置了height: 100%或显式高度，否则flex的100%会失效
图片尺寸波动引发重排抖动
没设宽高比的图片加载时会先占位空白，等资源到位才撑开高度，触发浏览器重排，卡片“跳一下”，等高布局瞬间失效。
现代方案优先用 aspect-ratio，它不依赖 JS，且支持度已覆盖所有主流浏览器（Safari 15.4+、Chrome 88+、Firefox 89+）。
- 图片容器加
aspect-ratio: 16/9（或按实际比例调整） - 图片本身加
object-fit: cover; width: 100%; height: 100% - 兼容旧版 Safari 或 Firefox？用
padding-top百分比 fallback：外层容器position: relative，内层图片绝对定位 +top: 0; left: 0; width: 100%; height: 100%，再用伪元素或空 div 控制 padding
间距控制不当放大视觉偏差
用 margin 给卡片加间隔，容易遇到外边距合并、末尾多出空隙、Grid 轨道计算错乱等问题。一行四个卡片，最后一张右边多出 1rem 空白，整行就显得右偏。
gap 是唯一干净解法，它专为网格和 Flex 设计，不参与文档流，不会合并，也不影响子项尺寸计算。
- 卡片容器上直接写
gap: 1.5rem，同时控制行距和列距 - 禁用
.card { margin: 0.5rem }这类写法，和gap混用会导致间距翻倍 - 老版 Safari（gap？改用
grid-column-gap: 1.5rem; grid-row-gap: 1.5rem，仅限必要兼容场景
图标/按钮位置随内容浮动
卡片里放个“查看详情”按钮，一段文字两行，另一段三行，按钮就一个高一个低。这不是细节问题，是用户注意力被强行割裂——视线没法平滑扫过整行卡片。
靠 margin-bottom 统一对齐虽简单，但只是“看起来齐”，没解决按钮锚定问题；真正稳定的做法是让按钮脱离内容高度影响。
- 卡片内部用
flex-column+margin-top: auto把按钮钉在底部 - 如果卡片有固定高度（比如
height: 320px），必须确保flex容器继承该高度，否则auto失效 - Grid 布局中也可用
align-items: end或justify-self: end，但语义不如margin-top: auto直观，且需注意父级align-content干扰
视觉平衡的关键不在“调得像”，而在“结构稳得住”。哪怕文字删掉一半、图片换一张、屏幕缩放到 125%，卡片依然保持顶部对齐、底部锚定、间距均匀——这才是真正可维护的平衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
