auto-fit 更优：空列收缩为0，避免小屏空白；需配minmax()，IE不支持；gap须随断点重置；clamp()可平滑替代多层媒体查询；grid-column-end:-1易出错，推荐span明确值或双保险方案。
grid-template-columns 用 repeat(auto-fit) 还是 auto-fill？
两者都让列数随容器宽度自动变化，但行为关键不同： auto-fit 会把空列收缩为 0 宽（视觉上“消失”），auto-fill 则保留空列占位。实际响应式布局中几乎总该选 auto-fit，否则小屏下可能留出大片空白。
常见错误是写成 repeat(auto-fill, minmax(250px, 1fr)))，结果在手机上渲染出 5–6 个看不见的空列，还影响 flex 布局嵌套时的对齐。
-
auto-fit+minmax(250px, 1fr)：列宽至少 250px，超出部分均分，不足则列数减少 - 必须配合
minmax()使用，单独写auto-fit无效 - IE 不支持
auto-fit和auto-fill，需降级为固定列数或 JS 补充
媒体查询里重定义 grid-template-columns 很容易漏掉 gap 重置
很多人只改列数，却忘了 gap 在不同断点下也需要调整。比如桌面端设了 gap: 24px，到手机端若不显式覆盖，24px 的间隙可能撑爆窄屏，导致内容溢出或横向滚动。
更隐蔽的问题是：如果父容器用了 display: contents 或 grid-auto-flow: dense，gap 可能被忽略或错位。
立即学习“前端免费学习笔记（深入）”；
- 每个媒体查询块内，
grid-template-columns和gap应该成对出现 - 避免用
rem或em写gap，小屏下字体缩放会导致间隙突变；优先用px或clamp() - 测试时用浏览器开发者工具临时删掉
gap，看是否真有元素贴边——这是判断是否漏设的最快方式
用 clamp() 替代多层媒体查询控制单列最小宽度
想让每列在 320px–768px 屏幕间保持 280px–320px 自适应？不用写 3 个 @media，clamp(280px, 80vw, 320px) 一行搞定。它比媒体查询更平滑，也避免断点跳跃感。
但注意：不是所有旧版 Safari 都支持 clamp()（iOS 13.4+ 才稳定），且 clamp() 里的单位混用容易出错——比如 clamp(1rem, 50%, 300px) 会因计算时机不同导致意外结果。
- 推荐写法：
minmax(clamp(280px, 90vw, 320px), 1fr) - 别在
clamp()里用em，父元素字体变化会让列宽抖动 - Chrome DevTools 的 Layout 面板里勾选 “Show grid line numbers”，能直观看到
clamp()实际生效的列宽值
grid-column-end: -1 不如明确写 span N 更可控
想让某个 item 占满整行，新手常写 grid-column-end: -1，看似简洁，实则隐患大：一旦父容器加了 padding 或设置了 grid-column-gap，-1 就可能指向错误轨道，尤其在嵌套 Grid 中。
更麻烦的是，某些 CSS-in-JS 库（如 Emotion）在 SSR 时无法正确解析负索引，导致首屏样式错乱。
- 用
grid-column: 1 / -1前，先确认父容器没设grid-column-start偏移 - 更稳妥的做法是算出列数后写死，比如
grid-column: span 4（配合repeat(4, 1fr)） - 如果列数动态（如
auto-fit），就用grid-column: 1 / -1+justify-items: stretch双保险
真正难的不是写对语法，而是当设计稿要求“小屏 1 列、中屏 2 列、大屏 4 列，但其中一张卡片要横跨全行”时，grid-column 的值得跟着 grid-template-columns 的实时列数走——这时候光靠 CSS 往往不够，得结合 container queries 或轻量 JS 监听列数变化。
