使用grid布局实现多行按钮排列，通过设置display: grid、grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))和gap: 10px，使按钮按行自动换行排列；配合grid-auto-flow: row确保排列方向，利用auto-fit和媒体查询实现响应式适配，末尾空白自动收拢，结构清晰且易于维护。
要在CSS中使用Grid实现多行按钮排列，关键在于正确设置容器的网格布局，并利用grid-auto-flow: row和gap属性控制排列方向与间距。这种方式适合动态数量的按钮，能自动换行并保持整齐。
设置Grid容器
将父容器设为display: grid，并使用grid-auto-flow: row让子元素按行依次填充。配合grid-template-columns定义每行显示多少列按钮。
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-auto-flow: row;
gap: 10px;
}
说明：
- repeat(auto-fill, ...) 自动填充可用空间
- minmax(120px, 1fr) 确保每个按钮最小120px，剩余空间平均分配
- grid-auto-flow: row 明确按行排列（默认值，可省略）
- gap: 10px 设置按钮之间的横向和纵向间距
处理响应式场景
在小屏幕上，希望按钮更紧凑或减少每行数量，可通过媒体查询调整minmax值或gap大小。
.container {
gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
}
提示： 使用auto-fit替代auto-fill能让末尾空白列自动收拢，更适合按钮组。
立即学习“前端免费学习笔记（深入）”；
实际应用示例
假设有一组操作按钮，如“保存”、“取消”、“导出”、“打印”等，放入Grid容器后会自动排成多行，每行尽可能放满，超出则换行，且所有间距一致。
注意： 不需要给按钮单独设置浮动或外边距，全部由容器统一控制，结构更清晰，维护更方便。
基本上就这些。合理使用Grid的自动布局能力，结合gap控制间距，能让多行按钮排列简洁又响应式。
