按钮被拉伸是 Grid 默认 align-items: stretch 和 justify-items: stretch 的设计行为，使子项主动撑满轨道宽高；解决方法包括设置容器 justify-items: start 或按钮 justify-self: start，或改用 inline-grid + grid-auto-columns: 1fr 实现内容驱动等宽。
按钮被拉伸是因为 align-items: stretch 默认生效
Grid 容器默认启用 align-items: stretch 和 justify-items: stretch，这意味着所有子项（包括按钮）会**主动撑满所在轨道的宽高**——不是 bug，是设计行为。你看到按钮变宽，大概率不是它“想宽”，而是 Grid 强制它填满列宽。
常见错误现象：grid-template-columns: 1fr 1fr 下两个按钮明明文字长度不同，却等宽；或者按钮嵌在 flex 容器里再放进 Grid，反而更糊。
- 别给按钮加
width: 100%或flex: 1——这会和 Grid 的 stretch 叠加，加剧拉伸 - 检查父容器是否误设了
justify-items: stretch（它控制水平拉伸，常被忽略） - 用开发者工具看按钮的 computed
width和min-width：如果min-width是auto，说明它正按内容最小宽度抗拉伸，但 stretch 仍会覆盖它
想让按钮按内容宽度显示，得关掉 stretch 行为
最直接的办法是让 Grid 容器放弃拉伸：在容器上设 justify-items: start（水平方向）和/或 align-items: start（垂直方向）。这样按钮就回归自然宽度，不再被强制填满列。
如果你只要部分按钮保持内容宽度，其余仍需拉伸，就不用动容器，而是在具体按钮上加 justify-self: start ——它会覆盖容器级的 justify-items。
立即学习“前端免费学习笔记（深入）”；
-
justify-items: start适用于整行按钮统一不拉伸 -
justify-self: start适合个别按钮（比如带图标的操作按钮）保持紧凑 - 避免混用：不要同时设
justify-items: stretch和某个按钮的justify-self: start，除非你明确需要差异化控制
用 inline-grid + 1fr 实现“以最长按钮为准”的等宽效果
如果你真正想要的是「同一行按钮自动等宽，且宽度由最长文本决定」，那不是要阻止拉伸，而是要**利用 Grid 的隐式列机制反向驱动宽度**——这时得换布局方式。
关键不是 display: grid，而是 display: inline-grid，配合 grid-auto-flow: column 和 grid-auto-columns: 1fr：
.btn-group {
display: inline-grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 4px;
}
.btn-group button {
white-space: nowrap;
margin: 0;
}
- 必须用
inline-grid，否则容器占满整行，失去内联特性 -
gap替代margin，避免外边距合并干扰宽度计算 -
white-space: nowrap防止按钮内文本换行，确保宽度严格由字符数+字宽决定 - 这个方案不依赖 JS，也不硬编码 width，浏览器原生支持（Chrome 57+、Firefox 52+、Safari 10.1+）
图片或图标按钮变形？object-fit 和 min-width: 0 得一起上
带图标的按钮（比如 <button><img><span>导出</span></button>）更容易被拉伸变形，原因有两个叠加：Grid 拉伸 + 图片自身未约束缩放。
解决要分两层：
- 给
<img>加height: 100%; object-fit: contain;（保持比例）或object-fit: cover;（裁剪居中），并确保其父<button>有明确高度上下文 - 给按钮本身加
min-width: 0;——这是关键。Grid 子项默认min-width: auto，会保护内容最小宽度；设成0才允许它被1fr真正压缩或拉伸 - 如果按钮内部还套了 flex 布局，那个 flex 容器也得加
min-width: 0，否则撑开会逐层传递
真正容易被忽略的是：min-width: 0 必须写在 Grid 子项（即按钮）上，而不是它的子元素；而且它和 object-fit 是协作关系，缺一不可。
