CSS网格布局中百分比和fr单位之间的差异

Question

CSS网格布局中百分比和fr单位之间的差异我正在玩CSS网格布局，并遇到了一个我无法找到答案的问题。请考虑以下示例：:root {   --grid-columns: 12;   --column-gap: 10px;   --row-gap: 10px;}.grid {   display: grid;   grid-template-columns: repeat(var(--grid-columns), calc(100% / var(--grid-columns)));   grid-column-gap: var(--column-gap);   grid-row-gap: var(--row-gap);   justify-content: center; } [class*=l-] {   border: 1px solid red;}.l-1 {   grid-column-start: span 1; }.l-2 {   grid-column-start: span 2;}.l-3 {   grid-column-start: span 3;}.l-4 {   grid-column-start: span 4;}.l-5 {   grid-column-start: span 5;}.l-6 {   grid-column-start: span 6;}.l-7 {   grid-column-start: span 7;}.l-8 {   grid-column-start: span 8;}.l-9 {   grid-column-start: span 9;}.l-10 {   grid-column-start: span 10;}.l-11 {   grid-column-start: span 11;}.l-12 {   grid-column-start: span 12;}<div class="grid">   <div class="l-6">Column 1</div>   <div class="l-6">Column 2</div>   <div class="l-3">Column 3</div>   <div class="l-4">Column 4</div>   <div class="l-3">Column 5</div>   <div class="l-2">Column 6</div>   <div class="l-1">Column 7</div>   <div class="l-10">Column 8</div>   <div class="l-1">Column 9</div>   <div class="l-5">Column 10</div>   <div class="l-5">Column 11</div>   <div class="l-2">Column 12</div></div>正如您所看到的那样，由于设置的百分比宽度，列会超出屏幕宽度calc(100% / var(--grid-columns))。如果有人能解释为什么百分比宽度会产生这样的差异，那将会很棒。

Answer 1

fr

该fr装置仅适用于容器中的自由空间。

所以在你的代码中：

grid-template-columns: repeat(12, 1fr);

...容器中的自由空间在12列中平均分配。

由于列只处理自由空间，grid-column-gap因此不是一个因素。fr在确定长度之前从容器宽度中减去它（规格参考）。

以下是浏览器的计算方法：

(free space - gutters) / 12  = 1fr

---

%

当你使用百分比时......

grid-template-columns: repeat(12, calc(100% / 12));

...容器分为12列，每列宽8.33333％。这是一个实际长度，不像fr单位，只涉及自由空间。

柱长和网格间隙都考虑在宽度中。

以下是浏览器的计算方法：

8.33333% * 12 = 100%
         +11 * 10px     = 110px

有明显的溢出。

（注意：grid-*-gap属性仅适用于网格项之间 - 从不在项目和容器之间。这就是为什么网格间隙的数量是11，而不是13。）

这有效：

grid-template-columns: repeat(12, calc(8.3333% - 9.1667px));

其中包括：

• 12列

• 每列的宽度取决于容器的整个宽度（100%）并除以12

  100% / 12 = 8.3333% (individual column width)

• 然后减去列间隙（有11个）

   10px * 11 = 110px (total width of column gaps)110px / 12 = 9.1667px (amount to be deducted from each column)

.grid {
  display: grid;
  grid-template-columns: repeat(12, calc(8.3333% - 9.1667px));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;}.l-1 { grid-column-start: span 1; }.l-2 { grid-column-start: span 2; }.l-3 { grid-column-start: span 3; }.l-4 { grid-column-start: span 4; }.l-5 { grid-column-start: span 5; }.l-6 { grid-column-start: span 6; }.l-7 { grid-column-start: span 7; }.l-8 { grid-column-start: span 8; }.l-9 { grid-column-start: span 9; }.l-10 { grid-column-start: span 10; }.l-11 { grid-column-start: span 11; }.l-12 { grid-column-start: span 12; }[class*=l-] { border: 1px solid red; }

<div class="grid">
  <div class="l-6">Column 1</div>
  <div class="l-6">Column 2</div>
  <div class="l-3">Column 3</div>
  <div class="l-4">Column 4</div>
  <div class="l-3">Column 5</div>
  <div class="l-2">Column 6</div>
  <div class="l-1">Column 7</div>
  <div class="l-10">Column 8</div>
  <div class="l-1">Column 9</div>
  <div class="l-5">Column 10</div>
  <div class="l-5">Column 11</div>
  <div class="l-2">Column 12</div></div>