根本原因是grid-item默认min-width: auto，仅overflow: hidden无效；必须同时设置min-width: 0（水平）或min-height: 0（垂直）才能触发截断，且text-overflow: ellipsis需满足四要素：min-width: 0、white-space: nowrap、overflow: hidden、width/max-width。
grid-item上写了overflow: hidden但内容还是溢出
根本原因不是属性写错了，而是子项默认有min-width: auto（等价于min-width: min-content），浏览器宁可撑开单元格，也不裁掉内容。只加overflow: hidden不会触发截断。
必须同时设置：min-width: 0（对水平溢出）或min-height: 0（对垂直溢出）——这是解锁压缩能力的开关。
- 明确的尺寸约束：比如
width、max-width、height，或由网格轨道（如grid-template-columns: 200px）提供边界 - 若需显示省略号，还得配
white-space: nowrap+text-overflow: ellipsis - 常见错误：在卡片组件里给
.card-desc加了overflow: hidden，但没设min-width: 0，结果长昵称把整列拉宽，右侧卡片错位
grid容器设了overflow: auto却没滚动条
因为Grid容器默认不创建BFC，且子项会主动撑开它——overflow根本没生效对象。容器只有在「自身有明确尺寸约束」的前提下，才能成为滚动上下文。
有效做法是：
- 给容器加
max-width或max-height（例如max-height: 300px），再配overflow-y: auto - 避免只用
grid-template-rows: 1fr——它会让行高无限伸展，除非外层有高度封顶 - 若需横向滚动，确保列轨道没用
max-content或未约束的1fr；改用minmax(0, 1fr)或minmax(0, 300px) - 调试时检查
getComputedStyle(container).height，如果返回auto且实际渲染高度远超预期，大概率是轨道尺寸失控了
text-overflow: ellipsis在grid-item里不生效
这不是bug，是CSS文本截断的硬性条件被破坏了。它要求四要素同时满足：
-
min-width: 0（解除grid item最小宽度保护） -
white-space: nowrap（禁止换行） -
overflow: hidden（隐藏溢出部分） -
width或max-width（提供截断依据，不能是auto）
示例写法：
.grid-item {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
注意：min-width: 0必须作用于.grid-item自身；如果它被包裹在<span></span>或<div>里且未设<code>display: block，text-overflow依然不会生效。
grid-column越界导致元素直接消失
显式写grid-column: 6 / 9，但容器只有4列轨道时，该子项不会隐藏，而是被渲染引擎彻底丢弃——控制台无报错，DOM里也查不到，页面“少了一块”。
安全做法：
- 避免硬编码大数值：比如
grid-column: 1 / -1比grid-column: 1 / 99更安全，表示“从第一列到最后一列” - 检查实际轨道数：用
getComputedStyle(el).gridTemplateColumns解析列数，注意返回值含函数如repeat(3, 1fr)，需手动计算 - 若需越界定位，改用
position: absolute+inset，别强求grid轨道覆盖所有可能位置
最常被忽略的是：min-width: 0必须写在grid直接子元素上，且如果它内部还嵌了flex容器，那个flex容器也得加一遍——撑开会逐层传导。
