Javascript 如何将CSS网格轨迹从像素转换为fr单位？

我想知道是否可能将CSS网格模板轨迹从像素转换为fr。 在这个例子中，我有一个DIV元素，它的宽度是1894px，高度是200px，它的类是

.grid

.grid {
    display: grid;
    width: 1894px;
    min-height: 200px;
    grid-template-columns: 1196px 100px repeat(2, 1fr);
    grid-template-rows: 1fr repeat(3, 0.5fr) 1fr;
    margin: 10px;
    gap: 0px;
}

因此，我想知道如何将

网格模板列的第一个轨道的1196px值转换为fr

此外，如果间隙大于0，会发生什么情况

在Chrome DevTools中，当手动搜索期望值时，将轨迹值更改为
4fr
时，我获得
1196px
，然后检查Computed选项卡中的值，但是，我如何在Javascript中获得该值？
您想要
网格模板列：xfr 100px repeat（2，1fr）因此公式为：

width_container = 100px + 3*gap + (x + 2)*F With  x*F = 1196px

在你的情况下，你会有

1894px = 100px + (x + 2)*F
1794px = (x + 2)*F

我们进行分组，得到：

1.5 = (x + 2)/x
1.5 = 1 + 2/x
x = 4

您案例中的通用公式可以写成：

(width_container - 100px - 3*gap)/1196 = 1 + 2/x
x = 2/(A/1196px - 1) where A = (width_container - 100px - 3*gap)

下面是计算的图示。请注意
alt
行与前面的行如何相似。在某些情况下不完全相同，因为我们需要进行四舍五入


$（'.grid:not（.alt）'）。每个（函数（）{
var w=$（this.width（）；
var g=parseInt（$（this.css（'gap'））；
var A=w-100-3*g；
var x=数学四舍五入（2/（A/1196-1））；
$（this）.next（'.alt'）.css（“网格模板列”，x+“fr 100px repeat（2，1fr）”）；
console.log（2/（A/1196-1）+“（x+”）；
})
.grid{
显示：网格；
宽度：1894px；
外形：1px实心；
网格模板列：1196px 100px重复（2，1fr）；
利润率：10px；
间隙：0px；
}
我{
显示：块；
高度：20px；
背景：红色；
}
i:第一个孩子{
背景：蓝色；
}