能否将多个CSS grid-column属性声明合并为同一条样式规则？

原生CSS目前暂不支持你示例里这种直接捕获选择器匹配的数字、直接绑定到属性值的写法，不过可以通过以下几种方案实现等价的简化效果：

• 方案1：搭配自定义数据属性使用attr()函数（需注意兼容性）
  你可以给对应DOM元素新增data-col自定义属性存储列数，比如：

<div class="col" data-col="1"></div>
<div class="col" data-col="2"></div>
<div class="col" data-col="3"></div>

然后仅需单条CSS规则即可实现需求：

.col {
  grid-column: attr(data-col number);
}

注意：该写法目前仅Chromium内核浏览器（Chrome、Edge等）支持，Firefox暂未适配，生产环境使用需要做兼容性判断。

• 方案2：使用CSS预处理器批量生成规则（兼容性最好，最常用）
  如果你用Sass/SCSS这类预处理器，仅需写几行循环代码就能自动生成所有需要的.colN规则，后续要拓展列数只要修改循环上限即可：

// 生成col1到col3的规则，要拓展到更多列修改3为对应数值即可
@for $i from 1 through 3 {
  .col#{$i} {
    grid-column: $i;
  }
}

这段代码编译后会直接输出你原本手写的三段CSS规则，兼容所有支持grid布局的浏览器，没有额外兼容性问题。

• 方案3：属性选择器合并公共样式
  如果你不想改DOM也不想用预处理器，可以用类前缀匹配的属性选择器统一设置所有.colN类的公共样式，减少重复代码：

/* 匹配所有类名以col开头的元素，统一设置公共样式 */
[class^="col"] {
  padding: 0 12px;
  /* 其他所有col类共有的样式都可以放这里 */
}
/* 仅单独设置不同的grid-column属性即可 */
.col1 { grid-column: 1; }
.col2 { grid-column: 2; }
.col3 { grid-column: 3; }

你示例中写的.col[0-9]{ grid-column: [0-9]; }属于CSS正则捕获绑定的设想，目前相关能力还在标准讨论阶段，没有正式落地，暂时无法直接在生产环境使用。

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