用 display: grid 和 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 可实现真正等宽、自适应、不崩不溢出的团队墙，小屏单列、中屏两列、大屏多列，每列均分容器；配合语义化 article 标签、正确头像样式（固定宽高+object-fit: cover）、flex-column 拉齐文字及无障碍设计，才能支撑长期迭代。
直接用 display: grid 配 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能做出真正等宽、不崩、不溢出的团队墙——不用 JS、不依赖框架，小屏自动单列，中屏两列，大屏三列或更多，且每列宽度始终均分容器。
为什么 auto-fit + minmax(280px, 1fr) 是唯一稳解
很多人试过 repeat(3, 1fr) 或 flex-wrap，结果在 iPad 或折叠屏上卡片被压扁、文字换行错乱、最后一行突然拉宽。根本原因是写死了列数或没设最小容错宽度。
-
minmax(280px, 1fr)中的280px是底线：确保头像不糊、姓名不折成三行、简介至少能显示两行 -
auto-fit会把空余轨道“收掉”，让剩余卡片均分整行；auto-fill则保留空位，适合需要对齐栅格背景的场景 - 别用
max-width硬限卡片宽度——它和 Grid 的1fr冲突，反而导致间隙错位 - Safari 对
flex-basis解析不一致，所以flex方案在部分 iOS 版本里会出现最后一行只有一张卡还占满整行的问题
头像变形、切脸、圆角失效？检查这三处 CSS
团队页最常被吐槽“怎么每个人脸都不全”，问题几乎都出在头像渲染逻辑上，不是图本身有问题。
- 容器必须设固定宽高且相等：
width: 140px; height: 140px;，否则border-radius: 50%不生效 -
<img>标签要加width: 100%; height: 100%; object-fit: cover;——cover才是裁剪居中，contain会留白，fill会拉伸 - 别在
<img>上写width和height属性（如<img style="max-width:90%" style="max-width:90%">），这会覆盖 CSS 的object-fit行为 - 如果用
aspect-ratio: 1 / 1替代固定宽高，记得加overflow: hidden防边缘溢出
卡片内文字高度不一致？用 flex column + flex-grow 拉齐
姓名两字、职位四字、简介长短不一，纯靠 min-height 很难对齐底部按钮或社交图标——尤其当字体加载延迟时，高度会闪动。
- 给每张
.team-member设display: flex; flex-direction: column; - 把姓名、职位、简介包进一个
.member-info，设flex-grow: 1;，它就会撑满剩余空间 - 底部操作区（如社交链接）设
margin-top: auto;，自然贴底，不依赖 JS 计算高度 - 避免用
line-height或padding模拟垂直居中，响应式下极易错位
移动端点击失效、屏幕阅读器读不出人名？无障碍不是附加项
很多团队页上线后才发现：键盘用户按 Tab 键跳过了所有人，或者 VoiceOver 只读“图片”“链接”，不知道是谁。
- 每个成员必须用
<article></article>包裹，不是<div>——这是语义化基础，也是 RSS 和搜索引擎识别“独立人物”的依据 <li> <code><img>的alt必须含人名+职位，如alt="李娜，产品总监"，不能是alt="头像" - 如果整张卡片是链接（比如点头像跳转个人页），外层
<article></article>就别再套<a></a>，否则键盘焦点会扫两次同一人 -
:hover效果必须配:focus，例如.team-member:focus { outline: 2px solid #007bff; }
真正难的不是写出第一版布局，而是当第 12 个成员加入、设计要求加暗色模式、还要支持键盘导航时，结构是否还能不改一行样式就跑通——Grid 的 auto-fit + 语义化标签 + 容器约束，才是扛住迭代的底层支点。
