grid对齐分三层：容器整体位置、项目默认对齐、单个项目自定义对齐；justify-items/align-items可被justify-self/align-self覆盖，place-items需配合min-width/min-height防溢出。
Grid 对齐不是“设一个属性就全居中”，而是分三层作用域：容器整体位置、所有项目在单元格内的默认对齐、单个项目覆盖默认的自定义对齐。搞混层级，justify-items 就会失效，place-items 也可能截断内容。
grid-container 的 justify-content / align-content 控制整个网格区的位置
这两个属性只在网格内容区总尺寸小于容器时才生效——比如你定义了 grid-template-columns: 100px 100px（共 200px 宽），但容器宽 500px，这时多余空间才可被分配。
-
justify-content沿行轴（默认水平）对齐整个网格块：值为start（左）、center（居中）、end（右）、space-between等 -
align-content沿列轴（默认垂直）对齐：适用于多行网格，单行时无效果 - 当
grid-auto-flow: column时，两轴角色互换：justify-content变成控制垂直方向，align-content控制水平方向 - 别和
justify-items混用还指望它影响子项——它管的是“网格块”这个大盒子，不是里面的格子
justify-items / align-items 只影响未显式设置 self 属性的子项
justify-items: center 看似让所有子项水平居中，但只要某个子项写了 justify-self: end，它就完全脱离容器控制。这是最常被忽略的继承逻辑断点。
- 子项显式声明
justify-self或align-self后，容器级的justify-items/align-items对它无效 -
direction: rtl会翻转start/end的物理方向：此时justify-items: start实际靠右 - 省略写法如
grid-row: 2等价于grid-row: 2 / auto，但若该行高度不固定，可能造成子项高度不一致，间接破坏对齐视觉
place-items 是简写，但不改变子项尺寸，溢出要自己兜底
place-items: center 等价于同时设 justify-items: center 和 align-items: center，但它不会压缩或限制子项内容。如果子项本身宽高超出所在网格区域，就会被裁剪或撑破布局。
- 必须配合
min-width: 0和min-height: 0使用，否则子项（尤其含图片、flex 内容时）默认不收缩，导致溢出 - 对
grid-area跨多格的子项，对齐基准是它所占整个网格区域的中心，不是内容盒中心——调试时加outline: 1px solid red能立刻看清实际占位 -
gap和子项margin别混用：gap是轨道间距，margin是子项自身外边距；叠加会导致间距翻倍，尤其在grid-auto-flow: dense下 margin 还可能被折叠
grid-column / grid-row 的线号容易算错，命名更稳
写 grid-column: 1 / 3 表示从第 1 条列线到第 3 条列线，跨 2 列（不是“第 1 列到第 3 列”）。常见错误是以为 1 / 4 占 2 栏，实际占了 3 栏。
- 负数线号从右/下反向计数：
grid-column: -2 / -1指倒数第二条列线到最右边列线 - 用命名比数字安全：如
grid-template-columns: [start] 1fr [main] 2fr [end]，之后直接写grid-column: start / main，避免硬编码线号随结构变动失效 -
gap不支持百分比值，只能用px、rem、em或函数如minmax(1rem, 2vw)；响应式间隙推荐用@media分段设gap，别靠margin + calc()模拟
真正卡住人的往往不是语法写错，而是没意识到 justify-items 会被单个 justify-self 覆盖，或忘了给子项加 min-width: 0 就直接上 place-items: center——结果内容被裁掉还查不出原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
