卡片必须用<article>而非<div>，因其语义表征可独立分发、复用的内容单元（如新闻、商品）；<section>仅适用于页面内逻辑分组，<div>无语义，易致屏幕阅读器忽略、SEO减弱。
卡片该用 article 还是 div？
语义错误会让卡片在屏幕阅读器里“消失”，SEO 也弱。如果这张卡片内容能独立存在（比如一条新闻、一个项目、一本书），就该用 article；它自带可订阅、可链接、可复用的语义含义。section 只适合页面内逻辑分组（比如“热门项目”这个区块下的所有卡片），div 则纯属无语义容器，别当默认选项。
常见错误是全用 div 套 h3 + p + button，结果辅助技术无法识别这是个“内容单元”。检查方法很简单：关掉样式，只看 HTML 结构——能否一眼看出每张卡片是独立信息块？
grid-template-columns: repeat(auto-fit, minmax()) 怎么设才不崩
写对语法不等于写对效果。关键在两个参数的实际行为：minmax(280px, 1fr) 中的 280px 是单卡最小宽度，低于它就强制换行；1fr 是剩余空间均分，不是固定像素，所以大屏下卡片会无限拉宽。
- 移动端小屏（如 375px）设
280px没问题，但设成320px可能触发横向滚动条 - 桌面端建议配合
.card { max-width: 400px; }控制上限，否则卡片过宽影响阅读 - 别写
repeat(3, 1fr)—— 这会锁死列数，失去响应能力；auto-fit才能自动收缩空列，auto-fill则会在末尾塞空白轨道，破坏 tab 键焦点流
卡片内部文字截断和图片不变形怎么稳住
文字长度不一、图片比例各异，是卡片视觉撕裂的主因。靠 JS 截字或固定 height 都不可靠。
立即学习“前端免费学习笔记（深入）”；
文字两行截断必须同时设：display: -webkit-box、-webkit-line-clamp: 2、-webkit-box-orient: vertical、overflow: hidden。注意父容器不能有 flex 或 grid 引入的隐式 min-height: auto，得显式加 min-height: 0。
图片区域要不变形，光靠 object-fit: cover 不够。必须在外层容器设 aspect-ratio: 16 / 9（或图书常用 2 / 3），再让 img 填满并居中裁剪：width: 100%; height: 100%; object-fit: cover; object-position: center。旧浏览器降级用 padding-top 百分比技巧，但现代项目优先走原生属性。
交互反馈为什么总出问题
用户点卡片任意位置跳转详情页，但很多实现只给按钮加 :hover 和 :focus，其他区域没反馈，键盘用户根本不知道焦点在哪。
正确做法是把整个卡片设为可聚焦目标：tabindex="0"（若用 div）或直接用 a 包裹 article（需设 display: block）。悬停效果必须同步到 :focus，且只用 transform 和 opacity，避免改 box-shadow 或 border 导致重排——否则 hover 瞬间下方所有卡片下移，体验直接断裂。
最简验证法：关掉鼠标，纯用 tab 键走一遍，看焦点是否连续、视觉反馈是否清晰、顺序是否符合 DOM 流。卡片布局真正的复杂点不在栅格，而在语义链（article → h3 → a）和交互链（tab → focus → hover → click）是否对齐。
