justify-items 和 align-items 控制网格项默认对齐，但仅对未设置 justify-self 或 align-self 的子项生效；place-items: center 是其简写，顺序为 align-items（垂直）在前、justify-items（水平）在后；按钮居中需确保容器有明确高度、子项不溢出，并避免 margin 与 gap 混用。
justify-items 和 align-items 控制默认对齐，但按钮不居中时先查这两个
Grid 容器里子元素没居中，大概率是 justify-items 或 align-items 没设对。它们分别控制所有网格项在行内轴（水平）和块轴（垂直）的默认对齐方式，但只对**没显式设置 justify-self 或 align-self 的子项生效**。
常见错误现象：justify-items: center 写了却还是左贴边；align-items: center 看起来偏高或偏低。
-
justify-items: center有效，但若按钮自身有width或min-width，stretch（默认值）就失效，而center不会强制压缩内容 -
align-items: center对齐的是单元格的 block-start 边界，在从上到下书写流中就是“顶部”，不是绝对像素意义上的垂直中点 - 如果按钮需要单独右对齐，别改容器，直接给那个按钮加
justify-self: end——它优先级更高
place-items: center 是简写，但顺序和生效条件容易搞反
place-items: center 等价于同时设 justify-items: center 和 align-items: center，但它不是“万能居中开关”：第一个值是 align-items（垂直），第二个才是 justify-items（水平）。
容易踩的坑：place-items: start end 实际是“顶对齐 + 水平右对齐”，不是“左对齐 + 右对齐”。而且它只作用于容器，无法覆盖单个子项的 self 属性。
- 真要同时控制两个方向，
place-items: center最常用，也最不容易出错 - 如果按钮组里混着主操作按钮和次要链接，别全靠
place-items，给主按钮加justify-self: end+align-self: center更精准 - 父容器必须有明确高度（比如
min-height: 200px），否则align-items: center在视觉上可能“浮空”
grid-template-columns: repeat(auto-fit, minmax(...)) 才能让按钮自动等宽居中
想让多个按钮横向等宽排列并居中，别手写 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 不兜底，得手动加 min-width/min-height
place-items: center 不会压缩或限制子项内容。如果子项本身宽高超出所在网格区域，就会被裁剪或撑破布局。
尤其当子项含图片、嵌套 flex 或文本过长时，默认 min-width: auto 和 min-height: auto 会导致它拒绝收缩，从而破坏对齐效果。
- 必须配合
min-width: 0和min-height: 0使用，否则子项可能撑开网格轨道 - 调试时加
outline: 1px solid red能立刻看清实际占位，区分是内容溢出还是对齐逻辑问题 -
gap和子项margin别混用：叠加会导致间距翻倍，尤其在grid-auto-flow: dense下margin还可能被折叠
grid-column: 1 / -1 跨满整行，那它的“居中”是相对于那一整行的宽度，不是按钮自身的宽高。这点不看清，调半天 justify-self 都没用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
