grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是首选写法，因其无需媒体查询或js，且能规避subpixel渲染和图片加载延迟导致的布局断裂；minmax(280px, 1fr)确保最小可读宽度与动态均分，auto-fit收缩空轨道防压窄。
为什么 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是首选写法
因为它是唯一能绕过媒体查询、不依赖 JS、且在真实设备上不因 subpixel 渲染或图片加载延迟而断裂的方案。Flexbox 的 flex-wrap: wrap 看似简单，但一旦卡片内含未设宽高的 <img> 或中文字数波动大的标题，就容易换行错位——浏览器按“当前渲染宽度”硬塞，不是按“设计意图”分列。
关键参数含义：minmax(280px, 1fr) 中的 280px 是移动端可读最小宽度（低于它文字挤成一团），1fr 不是固定值，而是动态均分剩余空间；auto-fit 会收缩空轨道，避免小屏下出现“看不见的列”把卡片压窄。
- 别写
repeat(3, 1fr)—— 手机上必然横向滚动 - 容器不能同时设
width: 100%和1fr，否则窄屏下 Grid 轨道计算可能出负值 - 若卡片高度差异大，加
align-self: start到.card，否则短内容会被拉高、底部悬空
gap 必须替代 margin 控制卡片间距
gap: 1rem 是 Grid 原生属性，它只作用于网格轨道之间，不触发 margin 折叠、不干扰父容器 overflow、也不受子项 float 或 position 影响。混用 gap 和 margin（比如给卡片加 margin: 0.5rem）会导致实际间距翻倍，尤其在动态插入卡片时轨道计算直接错乱。
- Safari 14.1+ 才完整支持
gap，旧版可用grid-column-gap/grid-row-gap替代 - 绝对禁用
margin-bottom模拟行距——Grid 行高由内容撑开，margin-bottom会让最后一行下方多出空白 - 不要给卡片设
display: inline-block再配margin-right，这是过时且不可控的写法
卡片内部必须用 flex column + flex-grow 实现等高与贴底
Grid 只管外层列数和行对齐，单张卡片内部高度不一致（比如描述文字长短不一）会破坏视觉节奏。光靠 height: 100% 不够，因为子元素没内容时高度塌陷，Grid 行高会压缩。
- 给卡片加
display: flex; flex-direction: column; min-height: 200px（根据设计定值） - 主体区域（如
.card-body）设flex: 1或flex-grow: 1吸收剩余空间 - 底部按钮用
margin-top: auto贴底，禁用position: absolute（脱离文档流、影响可访问性） - 避免给
.card设死height，flex 布局依赖自然高度计算
图片和文字必须加约束，否则再好的外层布局也会露馅
卡片崩坏最常见原因不是 Grid 写错，而是图片撑破容器、长标题折行异常、描述截断位置不对——这些都发生在卡片内部，外层布局无能为力。
- 图片容器加
overflow: hidden，<img>设width: 100%; height: auto; object-fit: cover; - 标题用
display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;截两行（比text-overflow: ellipsis更可靠） - 禁止用
background-image做卡片图——语义丢失、无法懒加载、打印时不出图 -
<img>标签必须带width和height属性（哪怕只是占位数值），防止 CLS（累积布局偏移）
真正难的不是写出第一版响应式卡片，而是让它们在 iOS Safari 加载慢时、Android WebView 字体渲染差异下、或者用户缩放文本时依然整齐。这要求每张卡片都自持边界，而不是指望外层布局兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
