用css grid实现响应式卡片组，移动端单列、768px起双列、1024px起三列；采用auto-fit+minmax保证弹性列数，gap替代margin确保间距可靠，卡片内用flex column+min-height+flex:1实现等高与底部对齐，图片用picture/aspect-ratio/宽高属性防抖动和cls，卡片整体加padding提升触控性，并添加role="list"/"listitem"保障无障碍。
用 CSS Grid 实现响应式卡片组，不依赖框架
直接用原生 display: grid 就能搞定，比 Flexbox 更适合等高、对齐和断点控制。关键不是“怎么排”，而是“断点怎么设才不卡顿”。
- 移动端默认单列，
@media (min-width: 768px)切双列，@media (min-width: 1024px)切三列——这是视觉舒适区，不是硬套像素值 -
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))比repeat(3, 1fr)更健壮，能自动适配不同宽度容器 - 别忘加
gap: 1rem，它比margin更可靠：不会在网格外产生意外空白，也不受父容器overflow影响
卡片内部结构必须用 flex + min-height 防止高度塌陷
卡片内容长度不一致时，光靠 Grid 外层无法保证底部对齐。常见错误是只设 height: 100%，但没处理子元素撑不开的问题。
- 给卡片容器加
display: flex; flex-direction: column - 内容区（如
.card-body）设flex: 1，标题/描述/按钮自然拉伸 - 关键：卡片本身加
min-height: 200px（或根据设计定），否则空内容时高度归零，Grid 行高会压缩 - 避免用
align-items: stretch以外的对齐方式——Grid 默认已拉伸，额外设置反而破坏等高
图片响应式要同时处理宽高比和加载性能
直接写 <img src="..." style="max-width:90%"> 会导致重绘抖动，且无法维持宽高比。更糟的是，没设 loading="lazy" 会拖慢首屏。
- 用
<picture></picture>+<source media="(max-width: 767px)"></source>提供不同尺寸图源 - 图片容器设
aspect-ratio: 4/3（现代浏览器），降级方案用padding-top: 75%+position: relative+ 绝对定位图片 -
img标签必须带width和height属性（即使只是占位数值），防止 CLS（累积布局偏移） - 禁止用
background-image做卡片图——语义丢失、无法懒加载、打印时不出图
移动端点击区域太小？用 padding 替代 margin 控制可触控性
很多人在卡片上只加 cursor: pointer，但没考虑手指点击精度。iOS Safari 默认忽略小于 44×44px 的可点击区域，且不触发 :hover。
- 给卡片整体加
padding: 1.25rem（至少 20px），而不是只给内部按钮加 - 移除卡片内
a或button的margin，改用padding扩展热区 - 测试时真机打开 Chrome DevTools 的 “Toggle device toolbar”，选 “Nexus 5X” 或 “iPhone SE”，看点击反馈是否明显
- 如果卡片需支持点击跳转，用
<a href="..." class="card"></a>而非<div onclick="...">——前者天然可聚焦、支持键盘 Enter、无障碍友好 实际开发中，最常被跳过的一步是给卡片容器加 <code>role="list"和每张卡片加role="listitem"。这不是“锦上添花”，而是屏幕阅读器识别卡片组语义的唯一可靠方式。
