auto-fit 无效是因为父容器缺少明确宽度约束，需设 width 或被弹性/网格父级撑开；应搭配 minmax(min, 1fr) 实现响应式等分，优先选 auto-fit 以合并空轨道。
用 grid-template-columns: repeat(auto-fit, 1fr) 为什么没效果？
因为 auto-fit（或 auto-fill）必须配合有明确尺寸约束的容器，否则 Grid 无法知道“一行能塞几个”。如果父容器宽度是 auto 或未设宽高（比如在 display: inline-grid 下），Grid 会退化为单列，repeat(auto-fit, 1fr) 看起来就像没生效。
常见场景：把 div 直接写在 body 里、嵌套在 flex 容器中但未设宽、或者用了 width: max-content。
- 确保父容器有明确宽度（如
width: 100%、max-width: 1200px，或被 flex/grid 父级撑开） - 避免给父容器设
display: inline-grid—— 改用display: grid - 检查是否意外触发了 shrink-to-fit 行为（例如父级是
flex且没设flex: 1或min-width: 0）
auto-fit 和 auto-fill 到底该选哪个？
二者都用于生成可变数量的轨道，区别在于空轨道是否保留：
-
auto-fit：生成轨道后，**空轨道会被合并**，剩余轨道等分剩余空间 → 实际呈现为「内容驱动的等分布局」 -
auto-fill：不管有没有子元素，**所有生成的轨道都保留** → 可能出现大量空白列（尤其当子项少于最大可能列数时）
多数等分需求（比如响应式卡片列表）应优先用 auto-fit。例如：
立即学习“前端免费学习笔记（深入）”；
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}注意：这里用了 minmax(250px, 1fr) 而不是纯 1fr —— 否则小屏下会无限压缩子项。
为什么加了 minmax() 才真正“响应式”？
1fr 单独用在 repeat() 里只是均分，不控制最小宽度；没有 minmax()，网格项在窄屏下会被压成一条线甚至换行错乱。
-
minmax(250px, 1fr)表示：每列至少 250px，最多占满可用空间的等分份额 - 当容器宽度 ≥ 250px × N 时，刚好显示 N 列；宽度再缩小，自动减少列数，每列仍 ≥ 250px
- 别写
minmax(1fr, 1fr)—— 这等于固定为单列，auto-fit失效
浏览器兼容性没问题：minmax() + auto-fit 在 Chrome 66+、Firefox 61+、Safari 11.1+ 均已稳定支持。
子元素太少时，网格还是不居中？
Grid 默认左对齐。即使用了 auto-fit，若子项只有 1 个，它仍会贴左，右侧大片留白。
- 加
justify-content: center让整行轨道居中（适用于少量子项） - 加
justify-items: center让每个子项内容居中（影响内部对齐） - 更稳妥的做法是结合
gap和容器 padding，避免依赖居中来“补救”布局缺陷
真正容易被忽略的是：Grid 的“等分”只作用于轨道分配，不负责子项内部渲染逻辑。如果子项本身含浮动、绝对定位或 display: inline-block，可能破坏高度一致性，导致视觉上不齐 —— 这时得查子项样式，而不是改 grid-template-columns。
