使用 grid-auto-flow: row 可实现按钮自动按行排列，结合 grid-template-columns 和 minmax() 能创建响应式多行按钮布局，适配不同屏幕尺寸。
在CSS中使用Grid布局制作多行按钮排列，可以借助 grid-auto-flow: row 实现自动按行填充子元素的效果。这种方式特别适合动态数量的按钮，无需手动指定每行位置，容器会自动将按钮从左到右、从上到下排列。
基本Grid布局结构
要实现多行按钮排列，先定义一个Grid容器，并设置列宽和行高。通过 grid-template-columns 指定每列的宽度（例如等宽或自适应），使用 grid-auto-rows 控制每一行的高度。
示例：.button-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 四列等宽 */
grid-auto-rows: 40px; /* 每行高度40px */
gap: 10px; /* 按钮间距 */
grid-auto-flow: row; /* 默认值，可省略 */
}
此时所有按钮会从左到右依次排列，填满一行后再换行。
grid-auto-flow: row 的作用
grid-auto-flow: row 是Grid的默认行为，表示新元素优先填入当前行，空间不足时创建新行。结合 grid-template-columns 使用，能轻松实现响应式多行按钮组。
立即学习“前端免费学习笔记（深入）”；
即使不显式写出 grid-auto-flow: row，效果也一样，但写出来有助于代码可读性和明确意图。
提示：- 若改为 column，则会优先填列，适合纵向排布场景
- 配合 minmax() 可实现更灵活的列宽控制
响应式多行按钮排列
为了让按钮在不同屏幕尺寸下自动调整列数，可以使用 repeat(auto-fit) 或 auto-fill 配合 minmax()。
.button-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-auto-rows: 45px;
gap: 12px;
grid-auto-flow: row;
}
这样每列最小100px，最大为1fr，浏览器会自动计算每行能容纳的按钮数量，超出则换行，适配手机到桌面各种设备。
实际应用建议
在制作表单操作栏、工具按钮组或标签选择器时，这种布局非常实用。
- 给按钮统一设置 text-align: center 和 padding 提升视觉一致性
- 利用 gap 而非 margin 控制间距，避免外边距叠加问题
- 为容器添加 padding 防止按钮贴边
基本上就这些。掌握 grid-auto-flow 与 auto-fit 的组合，就能高效构建灵活的多行按钮布局，无需媒体查询也能实现良好响应效果。不复杂但容易忽略细节。
