CSS Grid列动态最大宽度设置：三列自适应布局需求

我们可以通过Grid布局的minmax()函数结合auto与1fr值，实现同一布局自适应两种场景的需求：默认情况下第一列占满剩余空间，当后两列需要更多宽度展示内容时，第一列自动收缩至自身所需宽度。

核心CSS代码 #

.grid-container {
  display: grid;
  /* 核心列规则：第一列最小为自身内容宽度，最大填充剩余空间；后两列自适应内容宽度 */
  grid-template-columns: minmax(auto, 1fr) auto auto;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #eee;
}

/* 针对后两列的最大宽度限制（对应需求中的Grid2场景） */
.grid-container .col-2,
.grid-container .col-3 {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-item {
  padding: 0.5rem;
  background-color: #f5f5f5;
  border-radius: 4px;
}

场景示例 #

场景1：第一列收缩，后两列显示更多文本 #

当后两列内容较长时，第一列会自动收缩至自身内容宽度，让后两列尽可能展示更多内容：

<div class="grid-container">
  <div class="grid-item col-1">第一列内容</div>
  <div class="grid-item col-2">这是第二列的超长文本，需要占据更多宽度来完整显示内容</div>
  <div class="grid-item col-3">第三列同样是超长文本，希望能尽可能展示更多内容</div>
</div>

场景2：后两列限制最大宽度，第一列填充剩余空间 #

当后两列内容较短时，第一列会自动填充容器剩余空间，后两列最多占据100px宽度：

<div class="grid-container">
  <div class="grid-item col-1">第一列填充剩余空间</div>
  <div class="grid-item col-2">短文本</div>
  <div class="grid-item col-3">另一段短文本</div>
</div>

原理说明 #

• minmax(auto, 1fr)：第一列的最小宽度由自身内容决定，最大宽度为容器剩余空间的全部，完美实现“优先占满空间，必要时收缩”的需求。
• 后两列使用auto：默认适配自身内容宽度，配合max-width: 100px可限制其最大宽度，超出部分通过text-overflow实现省略号效果，兼顾显示完整性与布局美观。
• 仅需一套样式即可自动适配两种场景，无需额外切换类名或样式规则。

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