核心是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，它让浏览器自动计算列数：每列最小280px、最大均分剩余空间，auto-fit收缩空列，无需媒体查询即可实现响应式卡片网格。
grid-template-columns: repeat(auto-fit, minmax()) 是核心
能不用媒体查询就实现响应式卡片网格，靠的就是这行声明。它让容器自己“算”出该放几列，而不是靠断点硬切。关键不是写多少个 @media，而是让 Grid 轨道动态伸缩。
常见错误是：repeat(3, 1fr) —— 直接锁死列数；或者只写 minmax(280px, 1fr) 却漏掉 auto-fit，导致 Grid 不会主动收缩空列。
-
minmax(280px, 1fr)表示每列最小 280px，超出部分均分（不是固定最大值） -
auto-fit会把空列合并掉，卡片自动撑满可用宽度；auto-fill则保留空轨道，容易撑高容器或破坏对齐 - 必须确保父容器有明确宽度，比如
width: 100%或设为max-width，否则 Grid 容器可能不收缩，列数始终为 1
box-sizing: border-box 和 gap 必须配齐
很多人写了 grid-template-columns 却发现卡片错位或溢出，问题常出在这两个地方：一是没统一盒模型，二是用 margin 模拟间距。
gap 是 Grid 原生的轨道间隙控制，安全、可靠、不触发重排；而用 margin 容易在首尾多出空白，还和 box-sizing 冲突。
- 全局加
* { box-sizing: border-box; }，避免 padding/border 撑破minmax()的最小宽度 - 用
gap: 1rem替代margin，它只作用于轨道之间，不会影响子元素自身尺寸 - 不要给卡片设固定
width，让它自然由 Grid 分配；否则会和minmax()冲突，导致列数异常
Safari 和 Firefox 的兼容性细节不能跳过
auto-fit 在现代 Chrome/Edge 没问题，但 Safari 14.1+ 才完全支持，Firefox 73+ 开始稳定。旧版 Safari 可能渲染成单列或忽略 auto-fit，表现为小屏下仍显示多列但卡片被挤压。
- 检查是否用了
display: grid+grid-template-columns组合，单独写grid-template-columns不生效 - 避免嵌套 Grid 中重复使用
auto-fit，某些 Safari 版本对深层嵌套支持不稳定 - 如需兼容 Safari auto-fill + JS 监听
resize动态补 class，或直接切回 Flex +flex-wrap
IE 完全不支持 auto-fit，得换方案
IE 11 及更早版本不识别 auto-fit 和 minmax()，直接当无效声明忽略，结果就是所有卡片堆成一列。
这不是“加个前缀”能解决的问题，而是语法层面不支持。如果项目仍需兼容 IE，就得放弃纯 CSS Grid 方案。
- 用 Flex 布局替代：
display: flex+flex-wrap: wrap+flex-basis控制最小宽度 - 配合
@supports做渐进增强：@supports (display: grid) and (grid-template-columns: repeat(auto-fit, 1fr))) { ... } - 别指望 autoprefixer 自动 polyfill
auto-fit—— 它只是加前缀，不改语法
实际用起来，最常被忽略的是父容器宽度约束和 box-sizing。写对了 repeat(auto-fit, minmax())，但卡片还是不换行，八成是容器没设宽，或者 padding 把最小宽度撑爆了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
