关键在于repeat(auto-fill, minmax(min-width, 1fr))定义列轨道实现自动填充，而非grid-auto-flow: column；auto-fill保留空列确保对齐，auto-fit合并空列使内容拉伸填满；必须配合grid-auto-flow: row（默认）和显式容器宽度才能正确计算列数。
grid-template-columns 设为 repeat(auto-fill, minmax(...)) 是关键
Grid 按列自动填充不是靠 grid-auto-flow: column，而是靠列轨道定义本身具备响应式伸缩能力。真正起作用的是 repeat(auto-fill, minmax(min-width, 1fr)) 这种写法——它让 Grid 容器在给定最小列宽前提下，尽可能多地“塞”下等宽列，剩余空间由 1fr 均分。
常见错误是只写 repeat(auto-fill, 1fr)：这会让所有列强行均分容器宽度，失去“按最小宽度自动计算列数”的能力；或者误用 auto-fit 而没理解它会合并空轨道（适合卡片列表，但不适用于严格按列顺序填满的场景）。
实操建议：
-
minmax(250px, 1fr)表示每列至少 250px，最多占满剩余空间；实际渲染时，Grid 会基于容器宽度反复尝试“能放几列”，再均分 - 必须配合
grid-auto-flow: row（默认值），否则内容会按列优先流动，导致视觉错乱 - 如果子项高度差异大，可能产生明显空白列——这不是 bug，是
row流动模式下 Grid 的正常行为
为什么 grid-auto-flow: column 不等于“按列填满”
设置 grid-auto-flow: column 后，Grid 确实按列顺序放置子项，但它不会重排已有的行高、也不会自动拉伸列宽来填满容器。结果常是：第一列堆满内容后才进第二列，列宽固定（由 grid-template-columns 决定），右侧大量留白，且无法响应容器缩放。
典型误用场景：
- 想做一个响应式新闻卡片栏，却用了
grid-auto-flow: column+ 固定列数，缩小时卡片被挤变形或换行错乱 - 期望“内容从上到下、从左到右自然填满”，却忽略了 Grid 的二维布局本质：它先划分轨道，再按流序填充，不是瀑布流
- 没设
grid-auto-rows: minmax(min-height, auto)，导致高矮不一的卡片拉伸不一致，列内对齐困难
需要真正“按列顺序填满”时，该选什么？
如果业务逻辑明确要求“第1个元素在第1列第1行，第2个在第1列第2行……直到列满再进下一列”，且列数固定或需精确控制，grid-auto-flow: column 配合显式行数才是正解——但这和“自动填充”无关，属于手动轨道规划。
例如：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column;
grid-auto-rows: 100px; /* 强制每行等高 */
}
这种写法适合日历、矩阵表等结构化数据展示。但注意：grid-auto-rows 必须设具体值或 minmax()，否则新行高度由内容撑开，列间高度不同步。
容易踩的坑：
- 忘记限制
grid-auto-rows，导致列与列之间行高不一致，视觉割裂 - 容器高度不够时，内容被截断——Grid 不会自动换列，只会继续向下溢出
- 和
overflow: hidden搭配使用时，末尾几项可能完全不可见，调试困难
兼容性与 fallback 要留意这些点
IE 完全不支持 auto-fill 和 minmax()，哪怕加了 @supports 也难兜底。现代项目若需兼容旧环境，得准备双方案。
可行策略：
- 用
display: flex+flex-wrap: wrap模拟列填充效果，配合flex-basis控制最小宽度（但无法真正按列排序） - 服务端或 JS 动态计算列数，输出固定
grid-template-columns: repeat(N, 1fr)，避开auto-fill - CSS 中用
@supports not (display: grid)降级为 float 或 inline-block 布局
别忽略 gap 的兼容性：Firefox 早期版本对 gap 在 grid 中的支持有 bug，必要时用 margin 替代并用 :nth-child 清除最后一行 margin。
最易被忽略的是：当子项用 align-self 或 justify-self 调整位置时，auto-fill 模式下轨道数量动态变化，可能导致某些项突然“跳位”。这类细节只有在窗口反复缩放时才会暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
