1. 首页
  2. 问题
  3. CSS网格布局中的百分比和fr单位之间的差异
小编典典

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

css

我在玩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))。

但是，如果我使用fr单位，则效果很好：

:root {

  --grid-columns: 12;

  --column-gap: 10px;

  --row-gap: 10px;

}



.grid {

  display: grid;

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

  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>

如果有人能解释为什么百分比宽度会产生如此大的影响，那将是很好的。


阅读 326

收藏
2020-05-16

共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; }

    Column 1

    Column 2

    Column 3

    Column 4

    Column 5

    Column 6

    Column 7

    Column 8

    Column 9

    Column 10

    Column 11

    Column 12

2020-05-16