响应式卡片组怎么制作？

本文详解如何用纯CSS Grid打造高性能、无障碍的响应式卡片组：通过auto-fit与minmax实现智能列数适配（移动端单列→768px双列→1024px三列），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 默认已拉伸，额外设置反而破坏等高

图片响应式要同时处理宽高比和加载性能

直接写 会导致重绘抖动，且无法维持宽高比。更糟的是，没设 loading="lazy" 会拖慢首屏。

• 用 + 提供不同尺寸图源
• 图片容器设 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”，看点击反馈是否明显
• 如果卡片需支持点击跳转，用 而非
  ——前者天然可聚焦、支持键盘 Enter、无障碍友好