最直接的方式是用@media切换grid-template-columns。移动端优先写窄屏列数，宽屏用媒体查询覆盖；避免只改grid-column等子项属性；auto-fit需注意safari兼容性及内容高度差异导致的错位；grid-template-areas各断点须字符串完全匹配。
用 @media 切换 grid-template-columns 是最直接的方式
Grid 的列数控制本质是重设 grid-template-columns，媒体查询里覆盖它就行。不需要 JS，不依赖容器查询（@container 还没普及），纯 CSS 就够用。
关键点在于：列轨道定义必须写全，不能只写新增的列；重复模式用 repeat() 更安全，避免手误漏数。
- 移动端优先：先写窄屏（如
1fr或repeat(2, 1fr)），再在@media里加宽屏规则 - 断点选值看内容，不是死守 768px/1024px —— 文字撑不开就早切，卡片太挤就晚切
- 别在媒体查询里只改
grid-column或grid-row，那只是调整子项位置，不改变列数本身
minmax() + auto-fit 能自动适配但有陷阱
想让列数随容器宽度“弹性变化”？可以不用媒体查询，靠 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))))。
但它不是万能的：当子项内容高度差异大时，容易出现“最后一行只有一项还占满整行”的错位；另外 Safari 旧版本对 auto-fit 支持不稳定，会退化成单列。
立即学习“前端免费学习笔记（深入）”；
-
auto-fit会合并空轨道，auto-fill不会——多数场景用auto-fit -
minmax(250px, 1fr)中的250px是最小宽度，低于它就会触发列数减少，这个值得和你的卡片/内容实际最小宽度一致 - 如果子项设置了
grid-column: span 2，它可能破坏自动计算，导致列数异常
响应式模板切换要同步处理 grid-template-areas
用了命名区域（grid-template-areas）做布局？那每个断点都得配一套完整定义，不能只改列数。
比如桌面端是 "header header" "nav main" "footer footer"，移动端就得改成 "header" "nav" "main" "footer" —— 少一个引号或拼错名字，整个区域映射就失效，子项会掉到默认网格流里。
- 所有断点下的
grid-template-areas值必须字符串完全匹配（包括空格和换行），建议复制粘贴后逐字核对 - 如果区域名带连字符（如
"user-info"），确保子项的grid-area也写成一样，大小写和符号都不能错 -
浏览器 DevTools 的 Layout 面板里可实时查看当前生效的
grid-template-areas，比猜靠谱得多
.grid {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}
真正难的不是写几条 @media，而是当你有 3 层嵌套 grid、每层都要响应式、还要兼容老 Edge 时，哪一层该用 minmax，哪一层必须死守固定列数——这时候模板字符串里的空格和引号，比逻辑还容易出错。
