React中CSS Grid首列占用空间过大，如何让按钮组左右间距一致？

问题场景 #

开发React页面时遇到CSS Grid布局异常：

• 最初采用2列网格，部分元素跨2列显示，目的是让黄色方块按钮对齐
• 首列占用空间远超实际需求，导致按钮组左右两侧间距不均；文本换行后问题加剧，不换行则无此问题
• 项目中文本、按钮及其他元素随机交错排布，无法单独为按钮创建独立网格，且不能使用固定宽度
• 经测试，该问题符合CSS Grid规范的空间计算逻辑

解决方案 #

将网格结构调整为4列，设置网格列模板：

gridTemplateColumns: '1fr auto auto 1fr'

• 按钮和标签使用中间两个auto列，自适应自身内容宽度
• 文本元素设置跨4列显示（gridColumn: 1 / -1）
• 左右两侧的1fr列会自动平分容器剩余空间，让按钮组自然居中，同时保证左右间距一致，完美解决原布局问题

内容的提问来源于stack exchange，提问作者Will59