如何通过计数器动态设置grid-template-columns的repeat()整数值？

核心是对CSS计数器、CSS自定义属性、网格布局的渲染逻辑存在认知偏差，关键错误点如下：

• CSS计数器不是可全局读取的数值变量：它是专门为内容生成设计的功能，唯一的读取方式是在content属性中调用counter()/counters()函数，没有任何语法支持把计数器的计算结果赋值给CSS自定义属性。你在:root中写的--columns: column-sum属于完全无效值，CSS解析器只会把column-sum识别为无意义的标识符，根本不会关联到同名的计数器。
• 渲染时序完全不匹配：CSS计数器的累加计算是在元素布局绘制阶段完成的，但网格容器的grid-template-columns轨道定义，必须在子元素开始布局前就解析完成——浏览器不可能等所有子元素渲染完、统计完数量，再回头修改父容器的网格结构，这和浏览器的渲染流水线逻辑是冲突的。
• 你写的预期CSS还存在语法笔误：minmax(100px; 1fr)里的分号不符合语法要求，正确的参数分隔符是逗号，不过这不是导致方案失效的核心原因。

需求中动态增减子元素时自动适配网格列数的效果，有两种成熟实现路径：

纯CSS方案（支持有限列数） #

借助:has()选择器枚举需要支持的最大列数即可，不需要引入JS：

app-container {
  display: grid;
  gap: 1rem;
}
/* 匹配对应数量的列元素场景，可按需追加规则 */
app-container:has(> app-column:only-child) {
  grid-template-columns: repeat(1, minmax(100px, 1fr));
}
app-container:has(> app-column:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(100px, 1fr));
}
app-container:has(> app-column:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}
app-container:has(> app-column:nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(100px, 1fr));
}

该方案的缺点是仅能支持提前枚举到的列数，适合列数上限明确的业务场景。

JS方案（无列数限制） #

用MutationObserver监听容器的子元素变化，动态更新CSS变量值，灵活度最高：

/* CSS部分 */
app-container {
  display: grid;
  grid-template-columns: repeat(var(--columns, 1), minmax(100px, 1fr));
  gap: 1rem;
}

// JS部分
const container = document.querySelector('app-container');
// 统计当前列数并同步更新CSS变量
const syncColumnCount = () => {
  const colCount = container.querySelectorAll('app-column').length;
  container.style.setProperty('--columns', colCount);
};
// 初始化执行
syncColumnCount();
// 监听子元素增删自动同步
new MutationObserver(syncColumnCount).observe(container, {
  childList: true
});

该方案无论动态增加或删除多少个app-column元素，都能自动适配对应列数，没有数量上限。

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