如何通过CSS变量实现Grid布局中fr单位与变量的结合？

嘿，这个坑我之前踩过！你遇到的问题核心在于：CSS变量是作为独立的token被解析的，没办法像SCSS那样自动把数值变量和fr单位拼接成合法的轨道尺寸。当你写var(--days-shown)fr时，浏览器会把它拆成两个独立的部分（比如5和fr），而不是合并成5fr，所以这个值会被判定为无效，自然不生效。

不过有两种纯CSS的方案能完美解决你的需求，我给你详细说下：

方案一：把单位直接包含在CSS变量里 #

这是最简单的方法——直接让--days-shown变量的值自带fr单位，这样CSS里就能直接使用了。

示例代码： #

JavaScript（动态设置变量）：

// 假设这是你动态获取的天数
const daysShown = 5;
const gridContainer = document.querySelector('.grid-container');

// 把数值和fr拼接后存入变量
gridContainer.style.setProperty('--days-shown', `${daysShown}fr`);
// 设置用户自定义的列宽
gridContainer.style.setProperty('--user-column-width', '200px');

CSS：

.grid-container {
  display: grid;
  /* 直接使用两个变量即可，无需拼接 */
  grid-template-columns: var(--user-column-width) var(--days-shown);
}

方案二：用repeat()函数（更推荐，变量更灵活） #

如果你的--days-shown变量还需要在其他场景下作为纯数字使用（比如计算其他样式），那这个方案更合适：利用Grid的repeat()函数，把纯数字的--days-shown作为重复次数，生成对应数量的1fr列。

示例代码： #

JavaScript（动态设置变量）：

const daysShown = 5;
const gridContainer = document.querySelector('.grid-container');

// 这里只存纯数字
gridContainer.style.setProperty('--days-shown', daysShown);
gridContainer.style.setProperty('--user-column-width', '200px');

CSS：

.grid-container {
  display: grid;
  /* 用repeat生成指定数量的1fr列，和固定列宽组合 */
  grid-template-columns: var(--user-column-width) repeat(var(--days-shown), 1fr);
}

为什么原来的写法不生效？ #

再帮你理清楚底层逻辑：SCSS是预编译工具，它在编译时会把$days-shown + unquote('fr')直接拼接成5fr（假设$days-shown是5），最终输出的CSS是合法的轨道尺寸。但纯CSS变量是浏览器运行时替换的，它不会自动把数值和单位合并——var(--days-shown)替换后是纯数字，后面跟fr就成了两个不相关的token，不符合Grid轨道尺寸的语法规则，所以浏览器会忽略这个属性值。

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