如何设置CSS Grid列宽：首列自适应且不超容器50%宽度

直接通过grid-template-columns结合minmax()函数就能实现需求，核心代码如下：

.grid-container {
  display: grid;
  /* 第一列自适应内容，最大占容器50%；第二列占剩余全部空间 */
  grid-template-columns: minmax(auto, 50%) 1fr;
  gap: 16px; /* 可选，设置列之间的间距 */
}

代码说明： #

• display: grid：将容器设置为Grid布局模式
• minmax(auto, 50%)：定义第一列的宽度范围——auto让宽度跟随内容自适应，50%限制其最大宽度不超过容器的一半
• 1fr：第二列使用分数单位，自动占据容器剩余的所有可用空间

如果第一列内容过长导致溢出，可以给第一列添加换行样式，避免内容超出容器：

.grid-container .column-1 {
  overflow-wrap: break-word; /* 或使用 word-break: break-word */
}

示例HTML结构： #

<!-- 短内容场景：第一列宽度跟随内容，小于容器50% -->
<div class="grid-container">
  <div class="column-1">短文本内容</div>
  <div class="column-2">第二列填充剩余空间</div>
</div>

<!-- 长内容场景：第一列被限制在容器50%宽度内，内容自动换行 -->
<div class="grid-container">
  <div class="column-1">这是一段超长的测试内容，用来验证当第一列内容宽度超过容器50%时，会被限制在最大宽度内，剩余空间全部交给第二列</div>
  <div class="column-2">第二列填充剩余空间</div>
</div>

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