CSS Grid：如何让动态grid-template-columns中间列保持固定宽度？

我有一个表格，其中部分列根据数据动态生成，希望将这些固定宽度的列放在两个特定列（No和Price）之间。当前使用Grid布局实现，但第一个动态列Color宽度符合预期的161px，第二个动态列Size的宽度却不是161px。请问能否通过静态CSS实现需求，还是需要使用内联样式？

当前实现代码 #

CSS

.grid {
  width: 290px;
  overflow-x: auto;

  display: grid;
  grid-template-columns: [index] 80px repeat(auto-fit, minmax(161px, auto)) [price] 210px
}

.col {
  grid-row: 1;
}

.col.index {
  grid-area: index;
  grid-row: 1;
}

.col.price {
  grid-area: price;
  grid-row: 1;
}

HTML

<div class='grid'>
 <div class='col index'>No</div>
 <div class='col'>Color</div>
 <div class='col'>Size</div>
 <div class='col price'>Price</div>
 <div>1</div>
 <div>Red</div>
 <div>Large</div>
 <div>1,000</div>
</div>

问题原因 #

你当前使用的repeat(auto-fit, minmax(161px, auto))逻辑存在两个问题：

1. 容器总宽度固定为290px，但index列（80px）+ price列（210px）已经超过容器宽度，导致动态列被挤压收缩；
2. minmax(161px, auto)中的auto会让列宽根据内容自适应，所以第二个动态列会因内容较短而变窄。

静态CSS实现方案 #

不需要使用内联样式给每个列设置宽度，通过以下两种方式可以用静态CSS配合少量动态配置实现需求：

方案一：CSS变量控制动态列数量

通过CSS变量动态指定重复的列数，保持静态CSS结构，仅在父元素上设置变量即可：

.grid {
  width: 290px;
  overflow-x: auto;
  display: grid;
  /* 用变量控制动态列的数量，默认0列 */
  grid-template-columns: [index] 80px repeat(var(--dynamic-cols, 0), 161px) [price] 210px;
}

.col {
  grid-row: 1;
}

.col.index {
  grid-area: index;
}

.col.price {
  grid-area: price;
}

对应的HTML只需在grid容器上设置变量：

<div class='grid' style="--dynamic-cols: 2">
 <div class='col index'>No</div>
 <div class='col'>Color</div>
 <div class='col'>Size</div>
 <div class='col price'>Price</div>
 <div>1</div>
 <div>Red</div>
 <div>Large</div>
 <div>1,000</div>
</div>

方案二：自动轨道固定宽度

利用grid-auto-columns强制自动生成的列使用固定宽度，无需提前知道动态列数量：

.grid {
  width: 290px;
  overflow-x: auto;
  display: grid;
  grid-template-columns: [index] 80px [price] 210px;
  grid-auto-columns: 161px; /* 强制所有自动生成的列宽度为161px */
  grid-auto-flow: column; /* 让元素按列方向自动填充 */
}

.col {
  grid-row: 1;
}

.col.index {
  grid-column: index;
}

.col.price {
  grid-column: price;
}

这种方式下，动态生成的列会自动插入到index和price列之间，且保持161px的固定宽度。

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