使用 CSS Grid 的 inline-grid 布局配合 grid-auto-flow: column 和 grid-auto-columns: 1fr，可让所有按钮自动等宽——宽度由内容最长的按钮决定，无需 JavaScript 或手动计算。
使用 css grid 的 `inline-grid` 布局配合 `grid-auto-flow: column` 和 `grid-auto-columns: 1fr`，可让所有按钮自动等宽——宽度由内容最长的按钮决定，无需 javascript 或手动计算。
在响应式与设计一致性要求较高的 UI 场景中，让一组并排按钮拥有统一宽度（且该宽度动态匹配其中最宽者）是一项常见但易被低估的布局需求。传统 Flexbox 虽能均匀分配空间（如 flex: 1），却无法实现「以最大内容宽度为基准、其余按钮自动拉伸对齐」的效果；而硬编码固定宽度（如 width: 120px）又缺乏弹性，难以适配动态增减的按钮或国际化文本长度变化。
推荐解法：CSS Grid 自动列宽对齐
核心思路是利用 CSS Grid 的列自动尺寸机制——当设置 display: inline-grid + grid-auto-flow: column 时，容器会为每一项创建一个独立列；再通过 grid-auto-columns: 1fr，使所有列共享同一“基准轨道尺寸”，而该尺寸由所有列中内容最宽者决定（即 Grid 的隐式列自动取最大固有宽度）。这恰好满足题设需求：无需 JS 测量、不违背语义（非 table）、无 flex 的伸缩偏差。
✅ 正确实现代码如下：
.parent {
display: inline-grid;
grid-auto-flow: column; /* 水平逐列排列子元素 */
grid-auto-columns: 1fr; /* 所有隐式列等宽，宽度 = 最宽子项的固有宽度 */
align-items: center; /* 垂直居中对齐（可选） */
background: #ddddff;
padding: 10px;
margin-top: 20px;
gap: 4px; /* 推荐替代 margin，更可控的间距 */
}
.parent button {
margin: 0; /* 移除 margin，改用 gap 统一控制间隔 */
white-space: nowrap; /* 防止长文本换行影响宽度计算 */
}
⚠️ 注意事项：
- 必须使用 inline-grid（而非 grid），否则容器会独占整行宽度，失去内联布局特性；
- gap 替代 margin 更可靠：避免外边距合并问题，且 Grid 间距不参与宽度计算；
- 若按钮内含图标+文字，建议添加 white-space: nowrap 和 min-width: fit-content，确保宽度严格由文本内容驱动；
- 兼容性良好：现代浏览器（Chrome 57+, Firefox 52+, Safari 10.1+）均支持，IE 不支持，需按项目需求评估降级方案。
此方案真正实现了「声明式自适应」——开发者只定义行为逻辑（“所有按钮等宽，以最宽者为准”），浏览器自动完成尺寸推导与布局，简洁、健壮、符合现代 CSS 工程实践。
