javascript - 如何将 CSS 网格轨道从像素转换为 fr 单位？

Question

我想知道是否可以将 CSS 网格模板轨道从像素转换为 fr。 例如，我有一个宽度为 1894px、高度为 200px 的 DIV 元素，其类为 .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;
}

所以我想知道如何将grid-template-columns第一轨的值1196px转换为fr。

另外，如果间隙大于 0 会发生什么？

在 Chrome DevTools 中，手动搜​​索预期值时，将跟踪值更改为 4fr 时，我得到 1196px，然后检查“计算”选项卡中的值，但是，我如何才能在 Javascript 中获取这个值？

Answer 1

您想要grid-template-columns: 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 行与前面的行有何相似之处。由于我们需要从 repeat accept only integer 开始进行舍入，因此在某些情况下不完全相同

$('.grid:not(.alt)').each(function() {
   var w = $(this).width();
   var g = parseInt($(this).css('gap'));
   var A = w - 100 - 3*g;
   
   var x = Math.round(2/(A/1196 - 1));
   $(this).next('.alt').css("grid-template-columns",x+"fr 100px repeat(2, 1fr)");
   console.log(2/(A/1196 - 1) +"("+x+")");
})

.grid {
  display: grid;
  width: 1894px;
  outline: 1px solid;
  grid-template-columns: 1196px 100px repeat(2, 1fr);
  margin: 10px;
  gap: 0px;
}

i {
  display:block;
  height:20px;
  background:red;
}
i:first-child {
  background:blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="grid"><i></i><i></i><i></i><i></i></div>
<div class="grid alt" style=""><i></i><i></i><i></i><i></i></div>

<div class="grid" style="gap:100px;"><i></i><i></i><i></i><i></i></div>
<div class="grid alt" style="gap:100px;"><i></i><i></i><i></i><i></i></div>


<div class="grid" style="gap:50px;"><i></i><i></i><i></i><i></i></div>
<div class="grid alt" style="gap:50px;"><i></i><i></i><i></i><i></i></div>

<div class="grid" style="width:1900px;"><i></i><i></i><i></i><i></i></div>
<div class="grid alt" style="width:1900px;"><i></i><i></i><i></i><i></i></div>