真正起作用的是 grid-template-columns 配合 auto-fit 或 auto-fill；grid-auto-columns 仅定义隐式列轨道宽度，对自动换行无效。
grid-auto-columns 不参与自动换行控制，真正起作用的是 grid-template-columns 配合 auto-fit 或 auto-fill —— 这是初学者最容易搞混的核心点。
为什么设置 grid-auto-columns 对换行完全无效
grid-auto-columns 只定义「隐式列轨道」的宽度，即当子元素被显式定位到未声明的列（如 grid-column: 5）时，浏览器才用它生成新列。而多选按钮组通常是顺序排列、无显式定位的“自动放置项”，它们根本不会触发隐式列创建。换言之：grid-auto-columns 在这种场景下压根不执行。
常见错误现象：只写 display: grid; grid-auto-columns: 1fr;，结果所有按钮挤在一行，横向溢出容器，滚动条出现。
- 真正决定是否换行的，是
grid-template-columns中是否定义了可动态增减的列轨道 -
grid-auto-flow: row只是确保填入顺序（默认值，写不写效果一样） - 没有
grid-template-columns，Grid 就退化为单列无限宽布局
repeat(auto-fit, minmax()) 是实现自动换行的最小必要组合
必须用 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) 这类写法，才能让浏览器根据容器宽度实时计算列数，并在空间不足时“视觉上换行”。
关键参数差异：
-
auto-fit：空列会被压缩消失，末尾不留空白，适合按钮组这类紧凑型内容 -
auto-fill：保留所有可能的列轨道（即使为空），可能导致右侧留白 -
minmax(120px, 1fr)中的120px必须 ≥ 按钮实际渲染宽度（含 padding/border），否则 Safari 和部分安卓 WebView 会降级为单列
示例：
.btn-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
}
移动端换行失效？先检查真实内容宽度
按钮文字过长、内边距过大、或设置了 white-space: nowrap，都会导致实际宽度远超 minmax() 的 min 值，从而让 Grid 放弃多列、强制回退到单列布局——这不是 bug，是轨道计算的保守策略。
排查步骤：
- 用 DevTools 查看任意一个按钮的
computed width，确认是否 > 120px - 临时移除所有
padding、font-size、white-space相关样式，验证是否恢复换行 - 若必须保留大内边距，把
minmax(120px, 1fr)改为minmax(160px, 1fr)或更高
注意：minmax(min-content, 1fr) 虽能适配内容，但会导致不同按钮列宽不一致（因文字长度不同），破坏按钮组的整齐感。
gap 和 grid-auto-rows 的隐性影响
gap 同时控制行列间距，对换行行为无直接影响，但会影响每行可容纳的按钮数量（例如 gap: 20px 比 gap: 4px 更容易触发换行）。
grid-auto-rows 很少被显式设置，但它的默认值 auto 会让每行高度由最高按钮决定。如果某些按钮有图标+多行文字，而其他只是单字，就会造成行高参差——这不是换行问题，但会让“多行”看起来错乱。
- 加
grid-auto-rows: max-content可统一按内容撑开，避免高度塌陷 - 加
align-items: stretch（默认值）确保所有按钮等高，视觉更整齐 - 不要设固定
grid-auto-rows: 40px，除非你确定所有按钮内容都能被截断或溢出
最易被忽略的一点：Grid 的“换行”本质是列轨道数量动态变化，不是流式包裹。它没有 flex-wrap: wrap 那样的语义开关，所有逻辑都藏在 grid-template-columns 的表达式里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
