用 display: grid 实现三列自适应卡片的正确方式是：移动端默认单列（1fr），中屏（≥768px）两列（repeat(2, 1fr)），桌面端（≥1024px）三列（repeat(3, 1fr)），统一用 gap 控制间距，推荐使用 repeat(auto-fit, minmax(300px, 1fr))) 应对内容不均，并通过 align-items: stretch 或 grid-auto-rows 与 flex 布局结合解决高度不一致问题；ie11 需用 @supports 降级为 flex-wrap 方案。
用 display: grid 实现三列自适应卡片，别碰 float 或 inline-block
响应式三列卡片展台，grid 是当前最直接、可控性最强的方案。它天然支持等宽/等高、间距控制、断点切换，不用写 hack 弥补父容器塌陷或基线对齐问题。
常见错误是先写死三列 grid-template-columns: 1fr 1fr 1fr，结果在小屏上卡片被强行压缩、文字换行混乱——这不是 grid 不行，是没配响应式断点。
- 移动端优先：默认设为单列
grid-template-columns: 1fr - 中屏（如平板）用
@media (min-width: 768px)切到两列repeat(2, 1fr) - 桌面端（≥1024px）再切三列
repeat(3, 1fr) - 列间距统一用
gap，别用margin，否则会破坏网格流
grid-template-columns 的三种写法怎么选
写三列不等于必须手写三个 1fr。不同场景下，repeat()、minmax() 和 auto-fit 行为差异很大，选错会导致卡片在某些宽度下“消失”或“挤成一列”。
- 固定三列（不响应）：
grid-template-columns: repeat(3, 1fr)—— 适合后台管理页等无需缩放的场景 - 最小宽度保底 + 自动填充：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))))—— 推荐用于卡片内容长度不一的展台，能保证每列至少 300px，超出自动新增列 - 固定列宽 + 剩余空间分配：
grid-template-columns: 200px 1fr 200px—— 仅当左右有固定侧边栏时才用，普通卡片展台慎用
注意：auto-fit 和 auto-fill 看似一样，但前者会合并空轨道，后者保留空位——卡片数量少时，auto-fit 更干净。
卡片高度不一致？用 align-items 和 grid-auto-rows 控制
默认卡片内容长短不一，导致网格行高参差，视觉上像错位。这不是 bug，是 grid 的默认行为：每行高度由该行最高项决定。但你可以干预。
- 让所有卡片拉伸填满行高：
align-items: stretch（默认值，通常已生效） - 强制每行等高（比如都 300px）：
grid-auto-rows: 300px—— 简单粗暴，但内容超长会溢出 - 更稳妥的做法：给卡片容器加
display: flex; flex-direction: column，再用flex: 1让内容区撑满剩余空间 - 避免用
height: 100%，它依赖父元素显式高度，在grid中常失效
IE11 兼容不了 grid？别硬扛，降级方案要明确
如果项目还要求支持 IE11，display: grid 不能直接用。它的旧语法（display: -ms-grid）和现代语法不兼容，且不支持 gap、auto-fit 等关键特性。
- 别试图用 Autoprefixer “修复” —— 它只加前缀，不改语法结构，IE11 下照样报错
- 真实可行的降级：用
@supports not (display: grid)包裹 fallback 样式，内部用flex模拟三列（flex-wrap: wrap+flex-basis: 33.333%） - 或者更轻量：直接用媒体查询 +
max-width控制卡片宽度，靠inline-block或纯流式布局，放弃严格等高 - 重点：降级不是“看起来差不多”，而是确保核心信息可读、点击区域可用——卡片标题和主图必须完整可见
真正麻烦的不是写两套样式，而是测试时容易漏掉某些断点组合下的错位，尤其是当卡片内嵌了图片或第三方组件时，它们自身的尺寸逻辑可能和 grid 冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
