底部按钮居中应由其容器自身控制。1. justify-items: center 仅在按钮分处独立网格单元时有效；2. 若按钮同属一个区域，需用 .buttons { display: flex; justify-content: center } 或 grid 容器的 justify-content 实现；3. 推荐将按钮组放入独立 flex 或 grid 容器，避免依赖父级对齐属性，结构更清晰且兼容性好。
在使用 CSS Grid 布局时，若希望底部的按钮水平居中排列，可以通过 justify-items 或其他对齐属性来控制。但需要注意的是，justify-items: center 是否生效，取决于容器的网格项是否占据独立的网格轨道。
理解 justify-items 的作用范围
justify-items 用于控制网格项在其所在网格区域内的水平对齐方式。如果每个按钮都在独立的网格单元格中，justify-items: center 可以让它们在各自的格子内居中显示。
示例代码：
.container {
display: grid;
grid-template-rows: 1fr auto; /* 内容占满，按钮区在底部 */
min-height: 100vh;
justify-items: center; /* 水平居中网格项 */
}
.buttons {
display: grid;
grid-template-columns: repeat(2, 1fr); / 两个等宽按钮 /
gap: 10px;
width: 100%;
}
.buttons button {
width: 100%;
}
更推荐的做法：直接在按钮容器中使用 justify-content
大多数情况下，底部按钮适合用一个独立的 flex 或 grid 容器来管理布局。此时，更清晰的方式是让按钮容器自身处理对齐。
立即学习“前端免费学习笔记（深入）”；
使用 Flexbox 简单直接：
.buttons {
display: flex;
justify-content: center;
gap: 10px;
}
.buttons button {
flex: 0 0 auto; / 不伸展，按内容宽度 /
}
或继续用 Grid：
.buttons {
display: grid;
grid-template-columns: max-content max-content;
justify-content: center;
gap: 10px;
}
结合整体布局实现底部固定按钮栏
常见场景是内容滚动，按钮固定在底部。结构如下：
页面内容
CSS：
.container {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
}
.buttons {
display: flex;
justify-content: center;
padding: 16px;
background: #fff;
border-top: 1px solid #eee;
gap: 12px;
}
基本上就这些。关键点在于：不要依赖父容器的 justify-items 来控制一组内联元素的布局，而是把按钮的排列交给它们自己的容器去处理，逻辑更清晰，兼容性更好。
