用 justify-content: space-between 实现工具栏两端对齐，需设 display: grid 和 justify-content: space-between，前提是容器宽度足够、子项不换行且未被其他规则覆盖。
用 justify-content: space-between 实现工具栏两端对齐
直接在工具栏容器上设 display: grid + justify-content: space-between 就能撑开首尾项目，中间自动等距——但前提是容器宽度足够、子项不换行且未被其他对齐规则覆盖。
常见错误是加了 grid-template-columns 后又套 space-between，结果没效果：因为列轨道已显式定义，justify-content 只在“轨道总宽 space-between，改用 grid-template-columns: auto 1fr auto 更可控。
- 只有一行工具栏时，
space-between最简；多行需配合grid-auto-flow: row和align-content - 若子项用了
grid-column显式定位，justify-content会失效 - Safari 对
space-between在单行 Grid 中兼容性良好，无需额外 hack
grid-template-columns: auto 1fr auto 的实际表现差异
这种写法让左右两侧按内容宽度收缩（比如 logo 图标或用户头像），中间区域占满剩余空间并可放 flex 导航菜单；它比 space-between 更稳定，尤其当左侧/右侧项目宽度波动（如文字长度变化）时不会导致错位。
注意 auto 不等于 max-content：它会考虑 min-width 和 flex-basis，若右侧按钮组突然变宽，中间 1fr 仍能自适应压缩，而 space-between 可能直接溢出容器。
- 左侧项目若含图片，记得设
max-width: 100%防止撑破auto轨道 - 中间
1fr区域若要居中对齐内部元素（如导航ul），需在其内部用display: flex; justify-content: center，不能依赖外层 Grid 的justify-items - 移动端想隐藏右侧操作区？直接
grid-template-columns: auto 1fr即可，比display: none更利于可访问性
为什么 justify-items: end 会让右侧项目右偏移失效
justify-items 控制的是所有网格项在其单元格内的**主轴对齐方式**，不是整个容器的布局分布。设成 end 会让每个项目都贴着各自单元格右边缘，但如果单元格本身宽度为 auto 或由内容撑开，视觉上反而像“挤在一起”，根本达不到两端对齐效果。
真正该用的是容器级的 justify-content（整体分布）或项目级的 justify-self（单个项目在轨道内位置）。例如想让右侧图标固定贴右，给它加 justify-self: end，同时确保其所在列轨道足够宽（比如用 grid-column: -1 / -1 跨到最后一条垂直线）。
- 别在容器上同时写
justify-content: space-between和justify-items: end，后者会干扰前者的计算逻辑 - 检查 computed styles，确认项目是否被
grid-column-start等定位属性锁死位置，导致justify-self不生效 - 如果右侧是图标按钮组，建议包一层
div并设justify-self: end，比逐个设置更稳妥
响应式断点下 grid-template-columns 的安全写法
桌面端用 auto 1fr auto，到平板改 1fr auto（左收右展），小屏再切 1fr（全折叠）——关键在于避免用 minmax() 包裹 auto，否则某些浏览器（尤其是旧版 Safari）会把 auto 解析为 min-content，造成右侧图标被压扁。
更稳的做法是：小屏用 grid-template-columns: 1fr + grid-auto-flow: column 让项目纵向堆叠；或者直接切换为 display: flex，毕竟 Grid 在单维线性布局上不如 Flex 直观。
- 不要用
repeat(3, minmax(auto, 100px))，auto不能作为minmax()的参数 - 测试时打开浏览器的 Grid overlay，看轨道是否真按预期划分，而不是靠“看起来差不多”判断
- 如果工具栏高度不一致（如部分项目含两行文字），统一加
align-self: start，防止基线对齐偏差拉高整行
两端对齐真正难的不是写哪行 CSS，而是判断当前场景该用容器级分布（justify-content）还是轨道内定位（justify-self），以及能否容忍 auto 在不同浏览器里那点细微的宽度计算差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
