Grid 项重叠但不压字：收缩写法

容器收缩时让若干个网格项叠在一起，同时保证文字不被压掉，容易走偏的方向是给网格项加负 margin。挤压出来的重叠会破坏轨道计算，文字也会被相邻项盖住。正确做法是把重叠交给单元格，把可见性交给内容层。

写法

.stack {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.stack > .item {
  grid-area: 1 / 1;          /* 共用同一个单元格 */
  display: flex;
  min-width: 0;
  z-index: 1;
}

.stack > .item:nth-child(2) { z-index: 2; }

.item > .label {
  min-width: 0;
  overflow: visible;
}

grid-area: 1 / 1 让所有项落在同一行同一列，重叠由布局本身产生，不需要负 margin。项内的内容层用 flex 排布，叠放顺序交给 z-index。

min-width: 0 的作用

flex 子项的默认最小宽度是内容宽度，容器收缩时子项不肯让位，文字被挤出可视区。显式写 min-width: 0 之后，子项允许小于内容宽度，收缩交由容器决定，文字块仍按自身规则排布并保持完整。

两类错误做法

1. 用负 margin 制造重叠。轨道尺寸与间隙被改写，断点切换后位置不可预测，相邻项的文字互相遮挡。
2. 用 overflow: hidden 或 white-space: nowrap 强行收口。文字被截断或产生省略号，与「保持完整可见」的诉求相反。

检查清单

• 重叠来自共享单元格，不是外边距；
• 内容层带 min-width: 0；
• 叠放顺序用 z-index 显式声明；
• 容器收缩到最小断点时文字仍完整。