如何让CSS Grid三列布局中中间单元格占满剩余空间？

可以实现，根据你的需求，我们需要让左右两列宽度保持一致，同时中间列拉伸占据容器剩余空间。以下是两种可行的方案：

方案一：强制左右列宽度相同（基于内容最大宽度） #

如果希望左右列的宽度始终相等（取两者内容的最大宽度），中间列占据容器剩余空间，可以使用以下代码：

.foo {
  height: 100px;
  display: grid;
  /* 左右列设为内容宽度，中间列占剩余空间 */
  grid-template-columns: max-content 1fr max-content;
  resize: horizontal;
  overflow: hidden;
  text-align: center;
}

.foo div {
  border: 1px solid blue;
}

.foo div:first-child,
.foo div:last-child {
  /* 强制左右列宽度等于内容的最大宽度，保持一致 */
  min-width: max-content;
  width: 100%;
}

.foo div:first-child {
  text-align: left;
}

.foo div:last-child {
  text-align: right;
}

方案二：左右列平分剩余空间，中间列占满可用宽度 #

如果你的核心需求是左右列平分容器剩余空间（宽度始终相同），中间列拉伸占据所有剩余空间，只需调整grid-template-columns的取值：

.foo {
  height: 100px;
  display: grid;
  /* 左右列平分剩余空间，中间列占满可用宽度 */
  grid-template-columns: 1fr 1fr 1fr; 
  resize: horizontal;
  overflow: hidden;
  text-align: center;
}

.foo div {
  border: 1px solid blue;
}

.foo div:first-child {
  text-align: left;
}

.foo div:last-child {
  text-align: right;
}

对应的HTML保持不变：

<div class='foo'>
  <div>abcdefghi</div>
  <div>abcdefghijklmnopqrstuvwxyz</div>
  <div>abc</div>
</div>

内容的提问来源于stack exchange，提问作者Yukulélél