grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是唯一可靠的核心写法，因它动态计算列数、确保等宽、避免压扁文字和横向滚动，无需媒体查询或js；配合 gap 控制间距、卡片内用 flex 实现等高贴底、图片设 aspect-ratio 和 object-fit 防抖动，整体兼顾响应性、可访问性与性能。
用 CSS Grid 实现响应式卡片布局，grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是唯一可靠的核心写法，其他方案（如 Flexbox + 百分比宽度、float、inline-block）在真实项目中会因图片加载延迟、字体渲染差异、subpixel 计算误差频繁断裂。
为什么 auto-fit + minmax() 不可替代
这个组合不是“让卡片换行”，而是让浏览器根据容器可用宽度，动态决定每行放几列，并确保每列等宽——不靠 JS 算、不靠媒体查询切、不依赖内容长度。
-
minmax(280px, 1fr)表示：单列最小 280px，超出部分按比例均分（1fr），避免小屏压扁文字 -
auto-fit会让空的网格轨道自动收缩；auto-fill则保留空轨道，容易在内容少时留白错位 - 写死
repeat(3, 1fr)或repeat(4, 1fr)在手机上必然横向滚动，必须禁用 - IE11 不支持
auto-fit，但 IE 市占率已低于 0.03%，无需降级
gap 必须代替 margin 控制间距
用 margin 给卡片加外边距，会导致外边距合并、末尾项多出多余间隙、Grid 轨道计算错乱——尤其在嵌套或动态插入卡片时。
-
gap: 1.5rem同时控制行距和列距，且不触发 margin collapse - 别混用：
gap: 1.5rem+.card { margin: 0.5rem }→ 实际间距翻倍 - Safari 14.1+ 才完整支持
gap，旧版 Safari 可用grid-column-gap/grid-row-gap替代（仅限必要兼容场景）
卡片内部怎么做到等高 + 底部按钮贴底
Grid 只管列数和行对齐，单张卡片内部高度不一致（比如描述文字长短不一），会破坏视觉节奏。必须用 Flex 布局二次控制。
- 给
.card设display: flex; flex-direction: column; height: 100% - 主体区域（如描述）加
flex-grow: 1或flex: 1吸收剩余空间 - 底部按钮区域用
margin-top: auto贴底，禁用position: absolute（脱离文档流、影响可访问性） - 图片必须加
object-fit: cover和固定宽高比（aspect-ratio: 16/9），否则加载抖动会触发重排，导致等高失效
悬停动效卡顿？只许用 transform 和 opacity
用 top、left、margin-top 做上浮效果，每次 hover 都触发 layout（重排），低端设备明显掉帧。
- 正确写法：
.card:hover { transform: translateY(-4px); } - 必须显式声明
transition，例如：transition: transform 0.2s ease，否则部分 Chrome 版本有延迟 - 别写
transition: all 0.2s—— 字体加载、图片解码都会被纳入过渡，增加不可控开销 - 阴影变化也建议用
box-shadow+transition，但不要叠加太多层，iOS WebView 渲染压力大
最常被忽略的一点：Grid 容器本身要有高度上下文，比如由内容撑开，或设 min-height；否则 align-items: stretch（默认值）无高度可拉伸，卡片看着就“塌”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
