如何在CSS Grid中同时实现min-content与百分比宽度布局？

需求概述 #

需要实现键值对列表的Grid布局，满足以下要求：

• 所有「键」所在列宽度始终一致；
• 容器宽度充足时，键列宽度匹配最长键的宽度（即min-content）；
• 容器宽度不足时，键列自动收缩，避免值列内容溢出。

解决方案 #

使用minmax()函数定义键列的宽度范围，结合min-content和0作为上下限，值列设置为弹性宽度即可同时满足两种场景。Grid布局天然保证所有列宽度一致，无需额外处理。

代码示例 #

CSS

.panel {
  display: grid;
  gap: 0 20px;
  grid-auto-rows: 1fr;
  /* 键列：宽屏时取min-content，窄屏时自动收缩；值列占剩余空间 */
  grid-template-columns: minmax(0, min-content) 1fr;
  margin-bottom: 20px;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 演示窄容器效果的辅助样式 */
.thin {
  width: 300px;
}

HTML

<!-- 宽容器示例 -->
<div class="panel">
  <span class="text-ellipsis">key:</span>
  <span class="text-ellipsis">value</span>
  <span class="text-ellipsis">some really long key that should be truncated:</span>
  <span class="text-ellipsis">some really long value that should be truncated</span>
</div>

<!-- 窄容器示例 -->
<div class="panel thin">
  <span class="text-ellipsis">key:</span>
  <span class="text-ellipsis">value</span>
  <span class="text-ellipsis">some really long key that should be truncated:</span>
  <span class="text-ellipsis">some really long value that should be truncated</span>
</div>

原理说明 #

• minmax(0, min-content)：为键列设定宽度区间，容器宽度足够时，列宽自动适配最长键的宽度；容器空间不足时，列宽会收缩（受text-ellipsis限制，内容过长时显示省略号），优先保证值列的可用空间。
• 值列使用1fr：始终占据容器剩余的全部空间，避免内容溢出。

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