如何让CSS Grid列项自适应元素宽度，消除A、B间多余间隙？

你的问题出在网格列的定义上：原来的repeat(3, minmax(0, min-content))会让前两列被跨列的C块长文本撑开，导致列宽大于A、B本身的最小宽度，从而产生间隙。

调整方案如下：

修改后的CSS代码 #

.box-wrapper {
  display: grid;
  grid-gap: 5px;
  /* 前两列设为min-content，由A、B内容决定宽度；第三列占剩余空间 */
  grid-template-columns: min-content min-content 1fr;
  background-color: orange;
  width: 100%;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: 1 / 2;
  grid-row: 1;
}

.b {
  grid-column: 2 / 3;
  grid-row: 1;
}

.c {
  grid-column: span 2;
  grid-row: 2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.d {
  grid-column-end: -1;
  grid-row: span 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

对应HTML代码（无需修改） #

<div class="box-wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">very long text here lorum ipsum doloris lorum ipsum doloris</div>
  <div class="box d">D</div>
</div>

调整说明 #

• 前两列用min-content，确保宽度刚好适配A、B的内容，不会被C的长文本拉伸
• 第三列设置为1fr，让D块自动占据容器剩余的所有空间，保持布局的整体适配性
• 移除A、B的width: min-content，因为网格列的定义已经控制了它们的宽度，重复设置无意义

内容的提问来源于stack exchange，提问作者Ndx