工具栏图标等间距排列的关键是 gap 而非 justify-content；需配合 auto-fit + minmax 实现响应式等宽等距，并确保父容器有明确宽度（如 inline-size: 100%），否则 grid 布局失效。
工具栏图标等间距排列的关键不是 justify-content
很多人一上来就加 justify-content: space-between，结果发现图标边缘贴边、中间空隙不均，甚至缩放后错位。这是因为 justify-content 作用对象是「整行网格轨道」，不是图标本身；它不会产生项与项之间的间隙，只调整轨道块的对齐位置。真正控制图标之间统一空隙的，只有 gap。
用 auto-fit + minmax 实现响应式等宽+等距
工具栏图标数量常动态变化（比如插件增删），固定列数（如 repeat(5, 1fr)）会僵硬。应使用：
.toolbar {
display: grid;
grid-auto-flow: row; /* 必须显式写，防被重置 */
grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)));
gap: 8px;
}
-
auto-fit会让空列收缩，剩余宽度均分给现有图标，避免右侧大片留白 -
minmax(48px, 1fr)中的48px是手机窄屏下的最小安全尺寸（文字+图标可读），1fr保证桌面端等宽伸缩 - 别写成
minmax(48px, max-content)——后者失去弹性，缩放时图标会溢出或文字换行
父容器宽度缺失是最大隐性坑
如果 .toolbar 没有明确宽度（比如未设 width: 100% 或 inline-size），auto-fit 就无法计算“能塞几列”，图标可能全部堆在一行或塌缩成单列。常见表现：
- 图标在 Chrome 正常，在 Safari 里挤成一团
- DevTools 里看到
grid-template-columns计算值为空或为none
解决方法：给父容器加 width: 100% 或更稳妥的 inline-size: 100%，尤其当工具栏嵌套在 Flex 容器中时。
图标内容溢出时别动 grid-auto-flow
小屏下图标文字（如“加粗”“斜体”）可能换行或撑高，这不是布局问题，而是内容渲染问题。此时：
- 不要改
grid-auto-flow，它不控制换行 - 给图标按钮加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 配合媒体查询调小
minmax()的最小值，例如从48px改为36px - 绝对避免设
grid-template-rows，否则禁用自动行创建，图标会被裁剪
真正容易被忽略的是：gap 和父容器宽度这两个前提没满足时，后面所有 grid-template-columns 的精巧写法都无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
