### [Grid 项重叠但不压字：收缩写法](https://www.huociguo.com/article/1583)

**Published:** 2026-10-01T10:27:32

**Author:** 米了

**Excerpt:** 网格项重叠靠共享同一单元格实现，文字完整靠内容层的收缩控制。含写法、min-width:0 的作用与两类错误做…

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

![显示文本内容的黑色显示器，用于说明网格项重叠时的文本可见性](https://api.huociguo.com/wp-content/uploads/2026/10/d6.jpg)

重叠由单元格共享产生，不由外边距挤压产生

## 写法

```css
.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 显式声明；
-   容器收缩到最小断点时文字仍完整。

**Tags:** CSS Grid, 全宽布局, 弹性布局, 网格布局, 页头页脚

**Categories:** HTML5

---