17370845950

最直接的方式是用@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，哪一层必须死守固定列数——这时候模板字符串里的空格和引号，比逻辑还容易出错。