用 css grid 实现响应式卡片墙：容器设 display: grid，grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，gap: 1.5rem；卡片内用 flex column 布局，头像用 img + object-fit: cover；移动端单列断点设为 max-width: 768px，字号用 rem，图片失败时显示 initials 备用头像并输出控制台警告。
用 div 和 CSS Grid 实现响应式卡片墙，别碰 Flex 布局
Flex 做多行卡片会出高度不一致、换行错位、对齐失效等问题，尤其在成员头像尺寸不统一或简介长度差异大时。Grid 才是正解——它天然按二维网格控制行列，能强制每张卡片等高、等宽、自动换行。
关键不是“能不能做”，而是“能不能不加 JS 就稳住布局”。实操建议：
- 容器设
display: grid，用grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))实现自适应列数 - 加
gap: 1.5rem控制卡片间距，比margin更可靠（不会塌陷、不受 float 影响） - 每张卡片用
display: flex; flex-direction: column排布头像/姓名/职位/简介，避免用float或绝对定位 - 简介文字用
flex: 1占满剩余空间，再配合overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3截断三行
头像裁剪必须用 object-fit: cover，别用 background-image
团队照片来源杂（手机直拍、证件照、社交媒体截图），宽高比五花八门。用 background-image + background-size: cover 看似省事，但会导致：
- 无法语义化（
alt文字丢失，无障碍访问失败） - 打印时图片不显示（多数浏览器忽略 background）
- 高清屏下模糊（
background-size不参与 DPR 缩放计算）
正确做法：用 <img> 标签，设 width: 100%; height: 200px; object-fit: cover; object-position: center。这样既保留语义，又确保裁剪可控——object-position 还能微调焦点（比如把人脸居中）。
移动端断点只设一个：@media (max-width: 768px)
别搞 480px、640px、1024px 多套规则。现代设备像素密度和视口宽度差异大，靠固定像素断点反而容易漏掉 iPad Mini 或折叠屏半屏模式。
实操更稳的写法：
- 默认用 Grid 布两列（
grid-template-columns: repeat(2, 1fr)） - 在
@media (max-width: 768px)里改成单列：grid-template-columns: 1fr - 同时把卡片内边距从
1.5rem降到1rem，避免小屏上文字挤成一团 - 去掉所有
px字号，改用rem或em，让系统字号缩放生效
加载失败时 fallback 要具体，别只写 “图片加载失败”
<img> 的 onerror 事件或 CSS ::after 伪元素 fallback 很常见，但泛泛提示毫无价值。用户真正需要的是：“谁的图挂了？有没有替代信息？”
推荐方案：
- 给每张卡片加唯一
data-member-id属性（如data-member-id="zhangsan"） - 图片加载失败时，用 JS 插入带 initials 的灰色头像：
<div class="avatar-fallback">ZS</div> - 同时在控制台输出
console.warn("Member avatar failed to load:", "zhangsan")，方便前端快速定位缺失资源
真正在意体验的人，不会满足于“看起来没报错”，而会盯着每张卡片在弱网、缓存失效、CDN 故障下的表现——这些细节堆起来，才是卡片墙真正扛得住用的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
