CSS Grid 是实现响应式卡片网格的最佳方案，用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 实现自适应等宽列，gap 控制间距，卡片内部用 Flex 布局确保等高对齐与底部贴底，配合 transform 悬停动效、语义化标签（<article> 或 role="article"）及无障碍处理，兼顾性能、可访问性与维护性。
用 CSS Grid 实现响应式卡片网格，别碰 float 和 inline-block
浮动布局和行内块在现代卡片布局中已经过时，容易导致高度不一致、间隙不可控、断点错乱。CSS Grid 是目前最直接可控的方案，尤其适合等宽/等高卡片流。
关键不是“怎么画个卡片”，而是“怎么让整组卡片自适应容器宽度并保持对齐”。grid-template-columns 配合 minmax() 和 auto-fit 是核心：
section.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}-
280px是单张卡片最小宽度，低于该值就自动换行 -
1fr表示剩余空间均分，保证多列等宽 -
gap替代 margin，避免外边距合并和父容器溢出问题 - 不需要额外 wrapper 或清除浮动，也不用计算列数
卡片内部结构用 Flex 而非 table 或 position
卡片标题、描述、图片、操作按钮的垂直对齐，常见错误是滥用 position: absolute 或嵌套 table。这会导致内容截断、可访问性下降、响应式失效。
正确做法是把卡片设为 display: flex，方向设为 column，再用 flex-grow 控制主体区域撑满：
立即学习“前端免费学习笔记（深入）”；
.card {
display: flex;
flex-direction: column;
height: 100%;
}
.card-body {
flex-grow: 1;
}
.card-footer {
margin-top: auto; /* 底部按钮永远贴底 */
}- 图片高度不确定？加
object-fit: cover和固定aspect-ratio（支持度 OK，不支持时 fallback 用 padding-top 百分比） - 文字超长截断？用
display: -webkit-box+-webkit-line-clamp，别用 JS 截字 - 不要给
.card设死高度，flex 布局依赖自然高度计算
hover 动效必须用 transform + transition，禁用 top/left
很多教程用 top: -5px 或 margin-top: -5px 做悬停上浮，这会触发重排（reflow），造成卡顿，尤其在低配设备或列表较长时。
真正流畅的上浮效果只该用硬件加速属性：
.card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}-
transform和opacity是仅有的两个能走 GPU 加速的动画属性 - 必须显式声明
transition，否则部分浏览器 hover 状态切换会有延迟 - 避免在
:hover中修改height、margin、padding、font-size
无障碍与语义化：card 不是 div，要用 role 或 article
纯视觉卡片如果没语义，屏幕阅读器会读成一堆无关联的 div，用户无法理解这是独立内容单元。
有两种合规写法，按场景选：
<article class="card"> <header><h3>标题</h3></header> <div class="card-body">...</div> </article>
或保留 div 但补语义：
<div class="card" role="article" aria-labelledby="card-title-1"> <h3 id="card-title-1">标题</h3> <div class="card-body">...</div> </div>
- 有独立 URL 或可被 RSS 抓取的内容，优先用
<article> - 纯 UI 组件（如后台仪表盘指标卡），用
role="region"+aria-label更合适 - 所有图片必须有
alt，哪怕是装饰图也要写alt=""
卡片布局真正的复杂点不在样式本身，而在于它常被嵌套在动态数据流里——比如卡片数量未知、图片加载异步、服务端返回字段不全。这时候 Grid 的容错性、Flex 的弹性、语义标签的稳定性，比任何酷炫动效都重要。
