justify-items控制网格项行内轴（水平）对齐，align-items控制块轴（垂直）对齐；均作用于容器，可被justify-self/align-self覆盖；取值为start/end/center/stretch/baseline；place-items是其简写，语法为place-items: <align> <justify>。
grid-container 的 justify-items 和 align-items 怎么用
justify-items 控制所有网格项在**行内轴（inline axis）**上的对齐，也就是水平方向（左/中/右）；align-items 控制**块轴（block axis）**上的对齐，即垂直方向（上/中/下）。两者作用于整个容器，影响所有子项，但会被单个网格项的 justify-self 或 align-self 覆盖。
常见取值都一样：start、end、center、stretch（默认）、baseline。注意：stretch 会让项目拉伸填满单元格，如果项目本身有固定宽高或 max-width/max-height，就可能不生效。
-
justify-items: center让所有项目在列方向居中（水平居中），但前提是列轨道有足够剩余空间 - 如果某列设了
grid-template-columns: 100px 1fr，第二列会撑开，第一列里项目居中才明显可见 -
align-items: start不等于“顶对齐”——它对齐的是单元格的 block-start 边界，在从上到下书写流中才是顶部
单个网格项用 justify-self / align-self 覆盖全局对齐
当某个按钮需要右对齐，而其他按钮居中时，不能靠改容器属性，得直接在该 <div> 上设 justify-self：
.cta-button {
justify-self: end;
align-self: center;
}
这两个属性优先级高于容器的 justify-items 和 align-items，且可单独设置。它们也支持 self-start、self-end 等相对自身书写模式的值，但多数场景用 start/end 更可控。
立即学习“前端免费学习笔记（深入）”；
- 若项目设置了
width或min-width，justify-self: stretch就不会拉宽它 -
align-self: baseline在含文本的项目间对齐效果好，但需注意父容器align-items不能是stretch，否则 baseline 对齐会被覆盖 - Flexbox 里没有对应
self-start这种写法，Grid 里这个细节容易被忽略
place-items 是 justify-items + align-items 的简写，但有陷阱
place-items 是双值简写，语法为 place-items: <align> <justify>（注意：先 align，后 justify，和 flex 的 place-content 顺序不同）。
例如：place-items: center 等价于 align-items: center; justify-items: center；place-items: end start 表示垂直靠下、水平靠左。
- 只写一个值时，它同时赋给 align 和 justify；写两个值时，第一个是 align-items，第二个是 justify-items
- 不要误以为
place-items: start end是“左对齐+右对齐”，实际是“上对齐+水平右对齐” - 它无法像
place-content那样控制整个网格区域的对齐（那是针对空隙的），place-items只管项目本身
align-content / justify-content 控制的是网格线之间的空隙，不是项目
当网格容器有**多行或多列轨道**，且总尺寸大于所有轨道之和时，多余空间由 align-content（块轴）和 justify-content（行内轴）分配。它们对齐的是**轨道组（track group）**，不是单个项目。
比如 grid-template-rows: repeat(3, 50px)，容器高 300px，但设了 height: 400px，多出的 100px 就由 align-content 分配。
-
align-content: space-between把行轨道首尾撑到容器边缘，中间均分空隙 - 如果只有一行轨道（
grid-template-rows: 50px），align-content完全无效——这点常被当成 bug，其实是设计如此 - 项目本身仍受
align-items控制；即使align-content: end把整行轨道压到底部，项目在单元格里还是按align-items对齐
