按钮在grid容器中不居中，需先检查justify-items（控制水平）和align-items（控制垂直）是否正确设置，二者分别作用于行内轴和块轴，且受按钮自身宽高、容器高度及书写流影响；place-items: center是其简写，但仅对未被self属性覆盖的直接子项生效。
按钮在Grid容器里不居中？先看justify-items和align-items
Grid里按钮没按预期对齐，大概率是容器的 justify-items 或 align-items 没设对。这两个属性控制所有网格项的默认对齐方式，但容易被忽略——尤其当按钮本身有固定宽高时，stretch（默认值）可能根本不起作用。
常见错误现象：按钮明明写了 justify-items: center，却还是左贴边；或者垂直方向偏高/偏低，不是真居中。
-
justify-items控制水平对齐（行内轴），取值start/center/end都有效，但stretch会被按钮自身的width或min-width阻断 -
align-items控制垂直对齐（块轴），注意它对齐的是单元格的block-start边界，在从上到下书写流中才是“顶部”，不是绝对像素意义上的顶边 - 如果按钮需要单独右对齐，别改容器，直接给那个按钮加
justify-self: end—— 它优先级高于容器级设置
多个按钮横向等宽排列，用grid-template-columns还是auto-fit？
想让按钮自动均分一行空间，别手写 grid-template-columns: 1fr 1fr 1fr。列数一变就得改CSS，维护成本高。
更稳的做法是用响应式模板：grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))。它会让每个按钮至少宽120px，空间够就平分，不够就换行。
- 用
auto-fit而不是auto-fill：前者会收缩空轨道，后者保留空白列，视觉上容易出缝隙 - 按钮本身建议不设固定
width，靠minmax()和gap控制尺寸和间距 - 如果按钮文字长度差异大，加一句
white-space: nowrap防止意外折行
按钮组要上下左右都对齐，place-items能一步到位吗？
place-items 确实是 justify-items 和 align-items 的简写，但语法顺序反直觉：place-items: center start 表示垂直居中、水平靠左，**第一个值是 align-items，第二个是 justify-items**。
容易踩的坑是误以为 place-items: start end 是“左对齐+右对齐”，实际是“顶对齐+水平右对齐”。而且它只作用于容器，无法解决单个按钮特殊对齐需求。
- 真要同时控制两个方向，
place-items: center最常用，等价于justify-items: center; align-items: center - 如果按钮组里混着主操作按钮和次要链接，别全靠
place-items，给主按钮加justify-self: end+align-self: center更精准 - 注意：父容器必须有明确高度（比如
min-height: 200px），否则align-items: center在垂直方向可能无效
Grid里按钮底部对齐，为什么align-items: end不管用？
在卡片式布局中，常希望按钮统一停在卡片底部。但直接设 align-items: end 往往失败——因为 Grid 默认按单元格内容基线对齐，且 end 对齐的是单元格底边，不是内容底边。
真正可靠的方案是把按钮所在区域设为子网格或 Flex 容器，而不是依赖 Grid 的全局对齐。
- 给按钮父容器（比如卡片底部区）设
display: flex; flex-direction: column; justify-content: flex-end;，再把按钮放进去 - 如果坚持用 Grid，需确保该区域是独立网格项，并设
align-self: end，同时容器align-items不能是stretch（会覆盖align-self） - 按钮本身避免设
margin-bottom: auto—— 在 Grid 里这个写法不生效，属于 Flex 思维误用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
