用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))实现卡片自动换列且等宽，其中280px为最小宽度，1fr确保剩余空间均分，auto-fit收缩空轨道，gap替代margin控制间距，配合flex-column布局与语义化标签保障可访问性。
直接用 display: grid + auto-fit + minmax() 实现动态流，别碰 float 或 inline-block —— 它们在现代社交动态流中既难维护又容易错行、高度不一致、响应式断裂。
怎么让卡片自动换列且等宽？
关键不是“固定几列”，而是让浏览器根据容器宽度自动计算列数。靠的是 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 这一行：
-
280px是单张卡片最小宽度，小于此值就强制换行，避免卡片被压扁 -
1fr表示剩余空间均分，保证所有列等宽（哪怕只剩两列） -
auto-fit会收缩空轨道，而auto-fill会保留空白列，动态流必须选auto-fit -
gap替代所有margin，它不会触发外边距合并，也不需要额外清除逻辑
卡片内部如何保证图文+按钮始终对齐？
用 display: flex + flex-direction: column，而不是 position: absolute 或嵌套 table —— 后者会导致文字截断、屏幕阅读器失效、移动端布局崩坏：
- 给
.card设height: 100%和display: flex，方向为column -
.card-body（含标题和描述）设flex-grow: 1，撑满中间剩余空间 -
.card-footer（如点赞/转发按钮）加margin-top: auto，自然贴底 - 图片用
object-fit: cover+aspect-ratio: 4/3控制比例；不支持时 fallback 用padding-top: 75%+position: relative+ 绝对定位图片
悬停动效为什么一卡顿就怀疑性能？
因为用了 top、margin-top 或 left —— 这些属性触发 layout（重排），尤其在滚动长列表时明显掉帧：
立即学习“前端免费学习笔记（深入）”；
- 正确做法只用
transform: translateY(-4px)+transition: transform 0.2s ease - 确保卡片父容器没设
overflow: hidden（否则transform悬浮部分会被裁剪） - 如果卡片带阴影，
box-shadow本身开销不大，但叠加多层滤镜或blur()就会拖慢，慎用 - 动态流中卡片数量多时，建议加
contain: layout style paint到.card，隔离渲染影响范围
社交动态流里最容易被忽略的细节
不是圆角或阴影，而是语义化与可访问性：
- 用
<article>包裹每张卡片，而非<div class="card">—— 屏幕阅读器能识别这是独立内容单元 - 图片必须有
alt，哪怕为空（alt=""），若为装饰性图则加role="presentation" - 操作按钮（如“点赞”）需有明确
aria-label，比如aria-label="点赞这条动态"，不能只靠图标 - 加载更多按钮或无限滚动触发点，要配合
IntersectionObserver，别用scroll事件监听——后者在低端机上极易卡死
