grid自动换行本质是grid-template-columns配合minmax()动态生成列轨道，而非grid-auto-flow控制；需确保父容器有明确宽度、子项不撑满单元格、box-sizing正确，且minmax()参数合规（如minmax(120px, 1fr)）。

Grid 本身没有 flex-wrap 那样的开关，所谓“自动换行”，本质是列轨道数量随容器宽度动态变化的视觉效果——关键在 grid-template-columns 的写法，不是靠 grid-auto-flow 单独控制。

为什么只写 display: grid 和 grid-auto-columns 不会换行

常见错误是以为设了 grid-auto-columns: 1fr 就能自动分列。其实 grid-auto-columns 只在子项被显式定位到未声明列（比如 grid-column: 5）时才生效；顺序排列的元素根本不会触发它。结果就是所有项挤在单列里横向溢出。

• 真正起作用的是 grid-template-columns: repeat(auto-fit, minmax(...))
• auto-fit 和 auto-fill 都能动态生成列轨道，但行为不同：auto-fit 会收缩空列，auto-fill 保留空轨道（可能导致末尾留白或横向滚动）
• 漏掉 minmax() 或参数写错（如 repeat(auto-fit, 200px)），浏览器无法推导约束，直接降级为单列

minmax(120px, 1fr) 的参数必须严守规则

minmax() 第一个参数是轨道最小可取值，第二个是单个轨道最大能分到的份额。写错会导致静默失效：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 第一个参数必须是 <length></length>（如 120px、25vw），不能是 1fr —— 否则整个函数被忽略
• 第二个参数只能是 1fr 或 max-content；写 2fr、calc(33%) 等均无效，浏览器回退到 max-content，列宽失去弹性
• 最小值（如 120px）必须 ≥ 子项实际渲染宽度（含 padding、border、字体大小），否则 Safari 和部分安卓 WebView 会强制单列

父容器宽度缺失是换行失效最常被忽略的前提

auto-fit / auto-fill 要计算“能放几列”，必须知道容器的可用内联尺寸。如果父容器没明确宽度，Grid 就没法算：

• 父容器是 flex 子项但没设 flex-basis 或 width，宽度为 auto
• Grid 容器自身没设 width、max-width，又不在有约束的上下文里（比如直接挂载在 下）
• 子项写了 width: 100% 或 flex: 1，强行撑满单元格，覆盖轨道分配逻辑
• 忘了 box-sizing: border-box，padding 撑出额外宽度，让实际宽度超过 minmax() 的最小值

换行不是 Grid 的“功能”，而是列轨道动态增减的结果；真正容易卡住的，往往不是语法，而是容器宽度和子项实际渲染宽度这两个隐含前提。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！