卡片流布局优先用css grid，因其支持二维自适应、等高对齐和精确行列控制；flexbox仅适合一维流式场景，高度不一致时易错位。
卡片流布局用 CSS Grid 还是 Flexbox？
Grid 更适合二维排列（比如多行多列自适应），Flexbox 适合一维流式扩展（单行或单列滚动）。如果要响应式卡片网格、等高卡片、自动换行且控制行列数量，display: grid 是更直接的选择。Flexbox 在卡片高度不一致时容易出现错位，尤其在 Safari 旧版本里 align-items: stretch 行为不稳定。
推荐用 Grid，但得避开两个坑：
- 不要只写 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) 就完事，没设 gap 会导致卡片挤在一起
- 别漏掉 grid-auto-rows: minmax(min-content, auto)，否则内容撑高后，相邻行卡片高度不同，视觉断裂
- Safari 15.4 之前对 minmax(300px, 1fr) 解析有偏差，加 grid-auto-flow: dense 可缓解碎片空隙
怎么让卡片内容居中又不破坏语义结构？
别用 text-align: center 或嵌套多余 div 层来“强行居中”。卡片主体文字用 display: flex + flex-direction: column + justify-content: center 更可控；图标或头像用 object-fit: cover 配合固定宽高防拉伸。
实操要点：
- 卡片容器设 position: relative，方便后续加悬浮阴影或角标
- 标题用 h3，别降级成 div，否则影响 SEO 和屏幕阅读器识别
- 文字行数限制用 display: -webkit-box + -webkit-line-clamp: 2，纯 CSS 截断，比 JS 计算安全
- 避免在卡片内用 margin-top 推标题，改用 padding 或 gap 控制内部间距
响应式断点怎么设才不反复调试？
别按设备尺寸硬编码 @media (max-width: 768px)。优先用容器查询（Container Queries）——但目前仅 Chrome 105+、Firefox 112+ 支持，生产环境还得 fallback。稳妥做法是结合 clamp() + Grid 的内在弹性。
建议这样写：
- 主容器加 container-type: inline-size（支持时）
- 否则用 grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 100vw / 3 - 1rem, 320px), 1fr))
- 字体大小用 font-size: clamp(0.875rem, 4vw, 1.125rem)，避免小屏字太大、大屏字太小
- 图片宽度统一设 width: 100% + height: 0 + padding-bottom: 60%（按比例占位），再用 position: absolute 塞图，防止重排
悬停动效卡顿或闪屏怎么办？
常见问题是直接对 transform 和 box-shadow 做 transition，但没触发硬件加速，或阴影模糊值过大拖慢渲染。iOS Safari 对 box-shadow 的 blur 值 > 12px 会明显掉帧。
优化方案：
- 悬停只动 transform: translateY(-4px) 和 filter: brightness(1.05)，这两项 GPU 友好
- 阴影改用 box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.15)，把 blur 控在 12px 内
- 给卡片加 will-change: transform（慎用，只在真正需要时加）
- 避免在 :hover 里改 height 或 margin，会触发布局重排
卡片流看着简单，但真实项目里最常出问题的不是布局，而是图片加载占位、字体回退、暗色模式适配、以及焦点管理——这些不写进 CSS，光靠 Grid 也救不回来。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
