使用fr单位和minmax()函数可统一按钮尺寸：通过grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))确保每列在120px最小宽与等比伸缩间平衡，结合width: 100%、固定padding和box-sizing: border-box的按钮样式，使按钮在不同屏幕下保持一致外观，实现响应式布局中的尺寸协调。
在使用CSS网格布局实现响应式设计时，按钮大小不一致是常见问题，尤其在不同屏幕尺寸下。通过合理使用fr单位和minmax()函数，可以有效统一按钮的尺寸表现。
使用fr单位均衡分配空间
在网格容器中，fr单位能根据可用空间按比例分配列宽，避免因内容长度不同导致按钮宽度差异过大。
例如，将所有按钮所在列设为等宽：
.grid-container {display: grid;
grid-template-columns: repeat(auto-fit, 1fr);
gap: 10px;
}
这样每列占据相等的可用空间，按钮宽度自然趋于一致。
立即学习“前端免费学习笔记（深入）”；
结合minmax()控制最小和最大尺寸
仅用1fr可能在小屏幕上按钮过窄，或大屏幕上过宽。使用minmax()可设定合理范围：
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
}
说明：每个按钮列最小宽度为120px，最大为1fr，确保内容不会溢出，同时保持弹性伸缩。
确保按钮自身样式统一
即使网格列宽一致，按钮内部样式也可能影响视觉效果。建议设置：
- 统一
width: 100%，使按钮填满网格单元 - 固定
padding值，避免文字长短影响整体尺寸 - 使用
box-sizing: border-box确保尺寸计算一致
width: 100%;
padding: 12px 0;
box-sizing: border-box;
text-align: center;
}
基本上就这些。通过minmax()和fr搭配，再配合统一的按钮样式，就能在各种屏幕下保持按钮尺寸协调一致，不复杂但容易忽略细节。
