用 grid-template-columns 动态控制列数是卡片变列表的本质：桌面端 auto-fit + minmax 实现自适应多列，小屏直接设 1fr 单列；需分层重置 gap、解除内部尺寸约束、适配触摸翻转交互，并统一使用相对单位保障可读性。
用 grid-template-columns 控制列数切换
卡片变列表的本质，是把多列网格收窄为单列流式结构。关键不在“改布局方式”，而在用 CSS Grid 的 grid-template-columns 动态控制列数——它比媒体查询里反复写 display: flex 或 display: block 更干净、更可控。
常见错误是：在移动端强行用 flex-direction: column 套一层 wrapper，结果卡片内部样式错乱、间距失控。其实 Grid 一行就能切：
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))—— 桌面端自动铺满，最少每列 300px -
@media (max-width: 768px) { grid-template-columns: 1fr; }—— 小屏强制单列，不设固定宽，让内容自然撑开 - 别用
repeat(1, 1fr)，它会触发隐式行创建，导致卡片高度被拉伸；1fr单独写更稳妥
避免 gap 在小屏下撑出多余空白
Grid 的 gap 在单列时仍生效，容易让列表项之间空太大，尤其文字类卡片看起来松散断裂。
解决方案不是删掉 gap，而是分层覆盖：
- 基础设置：
gap: 1.5rem（桌面/平板） - 小屏重置：
@media (max-width: 480px) { gap: 1rem; }—— 缩小但不归零，保留呼吸感 - 如果卡片含图片，注意
gap和图片max-width: 100%的组合效果：过大的gap可能让图片在窄屏下被压缩变形
卡片内元素需脱离固定尺寸约束
很多翻转卡片或图文混排卡片写死了 width: 300px 或 height: 200px，一到列表模式就溢出或截断。
必须让内部结构“随容器收缩”：
- 去掉所有显式
width/height（除非图标等固定尺寸元素） - 用
max-width: 100%约束图片和嵌入内容 - 标题字体用
clamp(1rem, 4vw, 1.25rem)，而不是固定font-size: 1.25rem - 如果用了
transform: rotateY()翻转动画，确保.card-inner的transform-style: preserve-3d不受grid容器缩放影响——实际测试中，Chrome 128+ 和 Safari 17.6 已基本无兼容问题
移动端点击翻转要补 JavaScript 触发逻辑
纯 CSS 的 :hover 在触摸设备上不可靠，列表模式下用户点卡片想看背面，却没反应。
不推荐全量引入 JS 框架，轻量处理即可：
- 给卡片加
tabindex="0"，支持键盘焦点 - 监听
click和keydown（Enter/Space），切换一个is-flippedclass - CSS 里写两套规则：
.card.is-flipped .card-inner { transform: rotateY(180deg); } - 注意：不要在
@media (hover: none)里直接禁用 hover 动画——这会让部分 Windows 触控笔设备也失效；应以交互行为为准
最易被忽略的是字体可读性断层：卡片模式下 1.125rem 刚好，切到列表后行高没同步调，小屏上文字挤成一团。建议所有卡片内文本统一用 line-height: 1.5 + margin-bottom: 0.75rem 这类相对单位，别依赖父容器的 padding 来撑开间距。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
