grid-auto-columns只控制隐式列宽度，不触发换行；真正实现自动换行需用grid-template-columns配合auto-fit或auto-fill，因自动放置项不触发隐式列创建，仅当显式定位到未定义列时grid-auto-columns才生效。
grid-auto-columns 只控制隐式列，不决定换行；想让内容自动换行，必须用 grid-template-columns 配合 auto-fit 或 auto-fill。
为什么只设 grid-auto-columns 无法实现换行
隐式列只在以下情况触发：子元素被显式定位到未声明的列轨道（比如 grid-column: 6），而你没定义第 6 列。但大多数按钮组、卡片列表都是顺序排列、无 grid-column 声明的“自动放置项”，它们根本不会激活 grid-auto-columns。
常见错误现象：
- 写了
display: grid; grid-auto-columns: 1fr;，结果所有子项挤在一行横向溢出 - 加了
grid-auto-flow: row也没用——它只是规定填入顺序，默认值就是row - 浏览器压根没创建任何隐式列，
grid-auto-columns完全没执行
真正起作用的是 grid-template-columns: repeat(auto-fit, ...)
这是实现内容驱动换行的最小必要组合。它让浏览器根据容器宽度实时计算能容纳几列，并在空间不足时视觉上“换行”。
关键参数差异：
-
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;
}
什么时候才需要 grid-auto-columns
它只在明确需要动态生成额外列的场景下才有意义，比如横向滚动仪表盘、卡片流、或用户拖拽新增模块的编辑器界面。
典型用法：
-
grid-auto-flow: column+grid-auto-columns: minmax(250px, 1fr)：每新增一个项目就在右侧自动加一列，最小 250px，空间足则拉伸 -
grid-auto-columns: 1fr：配合显式定义的两列（grid-template-columns: 1fr 1fr），后续超出的项按 1fr 等宽分列 - 避免写死像素值，优先用
fr、minmax()或视口单位，否则窄屏下容易横向滚动
移动端换行失效？先查真实内容宽度
Grid 的换行不是靠“猜测”，而是基于轨道计算。只要任意一个子项的 computed width > minmax() 的 min 值，整行就会退化为单列。
排查步骤：
- 用 DevTools 查看任意一个按钮的
computed width，确认是否 > 120px - 临时移除
padding、font-size、white-space: nowrap，验证是否恢复换行 - 若必须保留大内边距，把
minmax(120px, 1fr)改为minmax(160px, 1fr)或更高
注意：minmax(min-content, 1fr) 虽能适配内容，但会导致小文字被极度压缩，视觉可读性差，不推荐用于按钮类交互元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
