如何实现CSS Grid列根据数量动态切换1/2或1/3宽度？

我有一个设置了display: grid的容器，希望列宽根据列的数量动态调整：当列数为2或更少时，每列宽度占1/2；当列数超过2时，每列宽度占1/3。目前的代码能满足列占1/3宽度的常见场景，但我希望能根据实际列数动态适配，请问是否有可行的实现方法？

现有代码如下：

CSS代码 #

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  border: 1px solid black;
  padding: 8px;
}

.column {
  grid-column: span 4 / span 4;
  border: 1px solid red;
  padding: 8px;
}

HTML代码 #

<div class="container">
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
</div>

方案1：基于列数量的精准适配（现代浏览器支持） #

利用CSS的:has()伪类直接检测容器内的列元素数量，动态修改网格布局：

.container {
  display: grid;
  gap: 8px;
  border: 1px solid black;
  padding: 8px;
  /* 默认：1-2列时，每列占1/2宽度 */
  grid-template-columns: repeat(2, 1fr);
}

/* 当容器内存在第3个及以上列元素时，切换为3列布局，每列占1/3宽度 */
.container:has(.column:nth-child(3)) {
  grid-template-columns: repeat(3, 1fr);
}

.column {
  border: 1px solid red;
  padding: 8px;
}

这个方案能严格根据列的数量切换布局，目前Chrome、Firefox 121+、Safari等主流浏览器均支持:has()，可以完美实现需求。

方案2：基于容器宽度的适配（兼容旧浏览器） #

如果需要兼容不支持:has()的浏览器，可以用auto-fit结合minmax()实现近似效果：

.container {
  display: grid;
  gap: 8px;
  border: 1px solid black;
  padding: 8px;
  /* 容器较窄时，每列至少占50%（最多2列） */
  grid-template-columns: repeat(auto-fit, minmax(calc(50% - 4px), 1fr));
}

/* 容器宽度足够时，切换为每列占1/3宽度 */
@media (min-width: 600px) {
  .container {
    grid-template-columns: repeat(auto-fit, minmax(calc(33.33% - 5.33px), 1fr));
  }
}

.column {
  border: 1px solid red;
  padding: 8px;
}

这个方案基于容器宽度调整列数，视觉效果接近需求，兼容性更好。

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