用 display: grid 排按钮需显式定义 grid-template-columns（如 repeat(auto-fit, minmax(120px, 1fr))），配合 justify-items/align-items 或 place-items 居中，避免默认叠在左上角；单个按钮右对齐用 justify-self: end；表单中用 grid-column 定位；窄屏下需设 button 的 min-width: 0 防溢出。
直接用 display: grid 就能排，但按钮不按预期对齐，大概率是没设 grid-template-columns 或忽略了 justify-items/align-items 的默认行为。
按钮全叠在左上角？先检查 grid-template-columns
Grid 容器只写 display: grid 不够，浏览器不会自动猜列数——它会把所有按钮塞进第一格。必须显式定义列轨道。
- 固定三列等宽：
grid-template-columns: repeat(3, 1fr) - 响应式自适应列数：
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))（推荐） - 混用单位更灵活：
grid-template-columns: 150px 1fr 2fr（适合图标+文字+操作按钮组合） - 漏写
grid-template-columns是最常见错误，DevTools 里看 Computed Styles 能立刻确认是否生效
按钮没居中？别只调 justify-items
justify-items: center 控制水平，align-items: center 控制垂直，二者缺一不可。但它们只对“未被 self 属性覆盖”的子项生效。
- 按钮自身有
width或min-width时，justify-items: stretch（默认值）会失效，center才真正起作用 -
place-items: center是简写，但顺序是align-items justify-items（垂直方向在前），别写反 - 单个按钮要右对齐？直接加
justify-self: end，比改容器更安全 - 父容器没设
min-height时，align-items: center可能视觉偏移——因为容器高度由内容撑开，不是固定值
多按钮横向等宽又换行？用 auto-fit + minmax()
手写 1fr 1fr 1fr 维护成本高，列数一变就得改 CSS。响应式场景下，靠 auto-fit 动态生成列更可靠。
-
repeat(auto-fit, minmax(120px, 1fr))：每个按钮至少 120px，空间够就平分，不够自动换行 - 必须用
auto-fit，不是auto-fill——后者保留空轨道，容易出现肉眼可见的空白列 - 按钮本身别设
width，让minmax()主导尺寸；加white-space: nowrap防文字折行撑高 -
gap比margin更干净，它只在网格项之间生效，首尾无额外间距
表单里按钮错位？显式用 grid-column 定位
在 label/input 混排的表单中，button 落点飘忽，根本原因是没脱离自动流——它和 input 共享同一行轨道，DOM 顺序决定位置。
- 给 button 直接加
grid-column: 2 / -1（从第 2 列起，横跨到末尾），适合提交按钮右对齐 - 多按钮并排且宽度不同？用
grid-template-areas更直观：grid-template-areas: "submit cancel"，再配grid-area: submit - 窄屏下按钮溢出？必须加
min-width: 0在 button 上——否则默认min-width: min-content会拒绝收缩 - 别为了对齐把 button 和 input 拆到不同网格区域，否则
label[for]关联可能失效，影响屏幕阅读器
Grid 排按钮真正难的不是写法，而是意识到它是个二维坐标系——grid-column 和 grid-row 是坐标，不是修饰；justify-items 是默认规则，不是最终判决；而 min-width: 0 这种细节，往往卡住整个布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
