工具栏用 grid-template-columns: 120px 1fr 160px 实现左右固定、中间自适应；内容不固定时改用 fit-content(200px)；纯左右布局用 grid-template-areas: "left . right" + grid-area 定位；避免 align-items/stretch 干扰，响应式需重定义 areas 并控制隐藏方式。
用 grid-template-columns 划分左右区域
工具栏左右对齐，本质是把容器拆成「左固定区 + 中间弹性区 + 右固定区」三列。直接写死左右宽度、中间用 1fr 即可，不需要计算百分比或 calc()。
-
grid-template-columns: 120px 1fr 160px：左侧图标区固定 120px，右侧按钮组固定 160px，中间自动填满剩余空间 - 如果左右内容宽度不固定（比如文字长度浮动），改用
fit-content(200px)或max-content更稳妥 - 避免用
auto—— 它会按内容撑开，导致右侧被挤出视口，尤其在窄屏下
让左右两组内容各自靠边，中间留空
有时工具栏不需要中间有内容，只是左 logo + 右操作按钮，中间完全留白。这时不要依赖 justify-content: space-between（那是 Flex 的逻辑），Grid 下更可靠的是命名区域 + 显式定位。
- 先定义
grid-template-areas: "left . right"，中间的.表示空单元格 - 再给左右元素分别设
grid-area: left和grid-area: right - 这样即使中间没元素，左右也会严格贴住容器两端，不受子元素数量或顺序影响
align-items 和 justify-items 别乱设
工具栏通常是水平排列的单行结构，垂直方向一般只需居中对齐。但很多人误加 align-items: center 后发现文字“偏高”或图标“下沉”，问题往往出在默认基线对齐（baseline）上。
- 统一用
align-items: center没错，但要确保所有子元素没有意外的vertical-align或line-height干扰 - 避免设
justify-items: stretch（默认值），它会让每个子项横向撑满所在列 —— 你只想让按钮自己占位，不是让它拉宽到列宽 - 真要控制单个子项水平位置，用
justify-self: start | end，而不是全局justify-items
响应式断点里别只改列数
小屏下工具栏常需堆叠或隐藏部分功能，但仅靠 @media 改 grid-template-columns 不够 —— 左右区域可能仍保留宽高，造成空白或溢出。
立即学习“前端免费学习笔记（深入）”；
- 配合
grid-template-areas重排：比如小屏设为"left" "right"，让左右内容垂直堆叠 - 对次要按钮加
display: none，但注意 Grid 项隐藏后，grid-area仍占位；要用visibility: hidden或彻底移除 DOM 才能释放空间 - 测试时重点看
gap是否在窄屏下过大，建议用gap: clamp(8px, 1vw, 12px)动态缩放
align-items: stretch 会让所有项拉伸。如果你的 logo 图片没设 height 或 object-fit，它可能把整条工具栏顶高。解决方法不是调 align-items，而是约束图片自身尺寸。 
