minmax(200px, 1fr)单独使用无法约束文本换行，必须配合white-space: normal、overflow-wrap: break-word等文本控制属性，否则长词会撑开列宽、破坏gap；其200px是列最小可用宽度，非文本最大显示宽度。
Grid列宽设为minmax(200px, 1fr)为什么还不够
很多人一上来就写 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))，以为能自动适配中/英/阿语文字长度差异——但实际在阿拉伯语长词（如 "التسجيل في النظام"）或英文复合词（如 "AuthenticationRequired"）下，列内容仍会撑开、挤压相邻列，甚至破坏 gap 间距。根本问题不在列容器，而在子项文本自身没被约束：Grid 只分配列宽，不干预内部文本换行逻辑。
必须配合 white-space: normal + overflow-wrap: break-word，否则长词直接溢出列边界。iOS Safari 对 overflow-wrap 的支持从 15.4 起才稳定，14.x 需 fallback 到 word-break: break-all（慎用，会劈开正常单词）。
-
minmax(200px, 1fr)控制的是列的「最小可用宽度」，不是文本最大显示宽度 - 阿拉伯语 RTL 文本需额外加
direction: rtl和text-align: right，否则text-overflow: ellipsis在左端生效，不符合阅读习惯 - 若列内含图标+文字组合，记得给图标容器加
flex-shrink: 0或width: fit-content，避免被长文本挤变形
用fit-content(300px)替代1fr能解决什么问题
fit-content(300px) 是更精准的宽度上限控制：它让列宽“尽可能小”，但不超过 300px；而 1fr 是“尽可能大”，容易在宽屏下把短文本（如中文“设置”、日文“設定”）拉得过宽，留白难看。尤其在卡片式 Grid 中，fit-content() 能让所有语言下的视觉密度更一致。
注意：IE 完全不支持 fit-content()，Edge 16+ 开始支持；若需兼容旧版，可用 max-width: 300px + width: 100% 组合模拟，但要确保父容器是 Grid item 且未被 min-width 锁死。
立即学习“前端免费学习笔记（深入）”；
- 搭配
grid-auto-flow: column时，fit-content()行为更可预测；默认row流向下，它只影响单列宽度，不影响行高 - 不要对 Grid item 直接设
width: 300px，这会覆盖 Grid 的自动分配逻辑，导致响应失效 - 当文本含大量空格（如英文段落），
fit-content()计算的是“首行最长连续无空格串”，可能比预期窄
多语言卡片中数字标签右对齐总错位，怎么用 Grid 修
典型场景：电商分类卡片，标题用中/英/阿语，右侧固定显示 (12)。用 Flex 实现时，标题长度一变，transform: translateX() 就失效；改用 Grid 后，常见错误是给整个卡片设 display: grid 却忘了定义显式轨道，结果浏览器按内容自动计算列，(12) 位置依然漂移。
正确做法是把标题和数字拆成两个命名区域：grid-template-areas: "title count"，再用 justify-items: end 控制 count 区域右对齐。这样无论标题是“首页”还是 "الصفحة الرئيسية"，数字都稳在右边缘。
- 区域名必须用引号包裹，且每行引号内空格分隔的名称数 = 列数
-
justify-items: end作用于count这个 grid area，不是整个卡片 - 如果数字标签本身是
span或div，需确认它没被其他样式（如text-align: left）覆盖
为什么text-overflow: ellipsis在 Grid 里常失效
Grid item 默认是 display: block，但 text-overflow: ellipsis 要求三个条件同时满足：overflow: hidden、white-space: nowrap、width 或 max-width 有确定值。Grid 中最容易漏掉的是第三条：当列宽由 1fr 或 fit-content() 动态计算时，item 没有显式 width，浏览器无法判断“哪里该截断”。
解法很简单：给文本容器加 width: 0 或 min-width: 0，再配合 flex: 1（即使不在 Flex 容器里，现代浏览器也认这个 hack）。iOS 15.4+ 支持良好，但 iOS 14 必须加 overflow: hidden 到父 Grid item 才生效。
- 别用
text-overflow: clip，它不显示省略号，纯视觉截断，用户感知不到内容被隐藏 - RTL 语言下，
text-overflow: ellipsis默认在左端生效，需加direction: rtl才让省略号出现在右端 - 如果 Grid item 内部还嵌了 Flex，记得给那个 Flex 容器也加
min-width: 0，否则子项会继承父级的最小宽度限制
direction、text-align、overflow 三者顺序稍有错乱，就会让省略号消失或位置反向。 
