justify-items仅控制网格项内容在单元格内的对齐，不改变其轨道位置；实现导航栏左右分布需配合grid-template-columns、grid-column或justify-self等定位属性。
justify-items 本身不负责“定位”，它只控制网格项内容在单元格内的对齐方式；想实现复杂导航栏布局，必须搭配 grid-template-columns、grid-column、justify-self 或 place-self 等真正具备定位能力的属性 —— 单靠 justify-items 拉伸或居中，连“首页”和“登录”分列左右都做不到。
justify-items 只作用于内容对齐，不是位置偏移
很多人误以为设了 justify-items: end 就能让某个导航项“靠右”，其实它只是让每个网格项内部的文字/图标往右挤，项本身仍在默认列轨道里。比如：
.navbar { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items: end; }
结果是三个导航文字都右对齐，但三者仍平均分布在三列中，整体还是居中的 —— 这不是“靠右导航栏”，只是“文字右对齐的居中导航栏”。
-
justify-items的值（start/end/center/stretch）影响的是所有子项的**内容块对齐方向**，不是它们在网格容器中的**轨道位置** - 若要移动某一项到特定列（如把“登录”塞进最右一列），得用
grid-column: 3 / -1或justify-self: end -
justify-self才是单个项的“局部justify-items”，且可覆盖容器级设置
真正控制导航项位置的组合写法
复杂布局的关键是：先用 grid-template-columns 划好“地盘”，再用 grid-column 或 justify-self 把项“摆进去”。例如实现左 logo + 中菜单 + 右用户头像：
立即学习“前端免费学习笔记（深入）”；
.navbar { display: grid; grid-template-columns: max-content 1fr max-content; align-items: center; }
- logo 保持默认
grid-column: 1，自动占第一列 - 菜单设
grid-column: 2，撑满中间弹性列 - 头像加
justify-self: end，让它在第三列内右对齐（视觉上紧贴右边缘） - 如果第三列不够宽，头像会被截断 —— 此时应改用
grid-column: 3 / -1让它跨到最后
响应式下 justify-items 容易失效的场景
当媒体查询把 grid-template-columns 改成 1fr（单列）时，justify-items: center 看起来“还行”，但一旦有项设置了 justify-self: end，它就会被强行挤到单元格最右边，而单列网格的“最右边”可能离容器右边界只剩几像素，造成视觉错位。
- 小屏下优先用
text-align: right控制文字对齐，而非依赖justify-items - 避免对不同屏幕尺寸混用
justify-self和justify-items，容易互相覆盖导致行为不可预测 - 调试时用浏览器开发者工具勾选“显示网格线”，一眼看出项是否真的落在目标列轨道里
真正难的不是写对 justify-items，而是意识到它只是网格对齐体系里最表层的一环；一旦需要错位、跨列、悬停位移或动态插入，就得立刻切到 grid-column、place-self 或配合 JS 更新 style.gridRow —— 这些才是动真格的定位手段。
