如何让CSS Grid项目在屏幕缩小时自动重叠以保证文本可见？

开发者阿泽

2026-6-27

实现缩小时盒子重叠且文本可见的布局

要实现横向缩小时容器收缩、盒子重叠且文本完全可见的效果，需要调整布局逻辑，解决原代码中display: grid与display: flex冲突、固定宽度导致文本截断的问题，具体方案如下：

核心思路

让盒子宽度由内容决定，避免文本被截断
通过动态负边距，使容器宽度不足时盒子自动向中间重叠
保留原需求中奇数盒子文本底部对齐的样式

修改后的代码

HTML

<div class="container">
  <div class="playerRow">
    <div class="playerBox" style="--index: 1">user 1 ahhahah</div>
    <div class="playerBox" style="--index: 2">user 2 ahhahah</div>
    <div class="playerBox" style="--index: 3">user 3 ahhahah</div>
    <div class="playerBox" style="--index: 4">user 4 ahhahah</div>
    <div class="playerBox" style="--index: 5">user 5 ahhahah</div>
  </div>
</div>

CSS

.container {
  width: 100%;
  height: 100px;
  border: 1px solid brown;
  overflow: hidden; /* 容器随屏幕收缩，超出部分隐藏 */
}

.playerRow {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  --box-base-width: 150px;
  --total-base-width: calc(var(--box-base-width) * 5);
}

.playerBox {
  min-width: fit-content; /* 宽度由文本内容决定，确保文本不截断 */
  width: var(--box-base-width);
  height: 100px;
  background-color: red;
  padding: 0 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 动态计算边距，容器不足时自动重叠 */
  margin-left: calc((100% - var(--total-base-width)) / 4 * (var(--index) - 1));
}

/* 保留奇数盒子文本底部对齐的样式 */
.playerBox:nth-child(1),
.playerBox:nth-child(3),
.playerBox:nth-child(5) {
  align-items: flex-end;
  padding-bottom: 0.5em;
}