minmax()只控制轨道宽度范围，不干预子项内部换行；阿拉伯语长词或无空格英文会触发min-content撑开列宽，须在grid直接子元素上设min-width: 0、white-space: normal、overflow-wrap: break-word。
grid-template-columns 用 minmax() 为什么还是撑开列宽
因为 minmax(200px, 1fr) 控制的是列轨道的「最小可用宽度」，不是文本最大显示宽度。Grid 只分配空间，不干预子项内部换行逻辑。当遇到阿拉伯语长词（如 "التسجيل في النظام"）或无空格英文复合词（如 "AuthenticationRequired"），子项默认 min-width: auto（即 min-content），会强制拉宽整列，破坏 gap 甚至挤压相邻列。
必须在 grid 直接子元素上加以下组合：
-
min-width: 0—— 解除 Grid item 的最小宽度保护 -
white-space: normal—— 允许按空格/断行点换行 -
overflow-wrap: break-word—— 在长词内强制断行（iOS Safari 15.4+ 稳定支持；14.x 需 fallback 到word-break: break-all，但慎用，会劈开正常单词）
text-overflow: ellipsis 在 Grid 里不生效怎么办
单行省略不是加了 text-overflow: ellipsis 就能工作。它需要四个条件同时满足，缺一不可：
-
min-width: 0（作用于 grid item 自身，不是父容器） white-space: nowrapoverflow: hidden-
max-width或width（不能是auto；建议用max-width: 200px这类具体值）
常见错误：嵌套了 flex 容器的 grid item，忘了给 flex 容器也加 min-width: 0，导致撑开逐层传导。
fit-content() 比 1fr 更适合多语言卡片布局
fit-content(300px) 让列宽“尽可能小”，但不超过上限；而 1fr 是“尽可能大”，容易把中文“设置”、日文“設定”这类短词拉得过宽，留白难看。
适用场景：卡片式 Grid、标签+数字组合（如“分类 (12)”）、图标+文字组合：
- 对图标容器加
flex-shrink: 0或width: fit-content，避免被长文本挤变形 - IE 完全不支持
fit-content()；Edge 16+ 开始支持；兼容旧版可用max-width: 300px; width: 100%模拟，但要确保父容器是 Grid item 且未被min-width锁死 - 注意：
fit-content()计算依据是“首行最长连续无空格串”，含大量空格的英文段落可能比预期窄
RTL 文本和分散对齐的细节陷阱
阿拉伯语等 RTL 文本需额外加 direction: rtl 和 text-align: right，否则 text-overflow: ellipsis 会在左端生效，不符合阅读习惯。
表格标签列用分散对齐（text-align: justify-all）虽能视觉对齐，但它只适合固定宽度、内容较短的场景：
- 不适用于数据区或长文本（会拉伸空隙，造成可读性下降）
- CSS 中需配合
text-justify: distribute（部分浏览器仍需前缀） - 若用在 Grid item 内，记得先设
min-width: 0，否则分散对齐可能被最小宽度保护阻断
最易被忽略的一点：所有这些控制都依赖于你是否真的在 grid 直接子元素上设置了 min-width: 0——漏掉这一步，其他属性基本白配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
