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:&nbsp;repeat(12,&nbsp;1fr);...容器中的自由空间在12列中平均分配。由于列只处理自由空间，grid-column-gap因此不是一个因素。fr在确定长度之前从容器宽度中减去它（规格参考）。以下是浏览器的计算方法：(free&nbsp;space&nbsp;-&nbsp;gutters)&nbsp;/&nbsp;12&nbsp;&nbsp;=&nbsp;1fr%当你使用百分比时......grid-template-columns:&nbsp;repeat(12,&nbsp;calc(100%&nbsp;/&nbsp;12));...容器分为12列，每列宽8.33333％。这是一个实际长度，不像fr单位，只涉及自由空间。柱长和网格间隙都考虑在宽度中。以下是浏览器的计算方法：8.33333%&nbsp;*&nbsp;12&nbsp;=&nbsp;100% &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+11&nbsp;*&nbsp;10px&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;110px有明显的溢出。（注意：grid-*-gap属性仅适用于网格项之间 - 从不在项目和容器之间。这就是为什么网格间隙的数量是11，而不是13。）这有效：grid-template-columns:&nbsp;repeat(12,&nbsp;calc(8.3333%&nbsp;-&nbsp;9.1667px));其中包括：12列每列的宽度取决于容器的整个宽度（100%）并除以12100%&nbsp;/&nbsp;12&nbsp;=&nbsp;8.3333%&nbsp;(individual&nbsp;column&nbsp;width)然后减去列间隙（有11个）&nbsp;10px&nbsp;*&nbsp;11&nbsp;=&nbsp;110px&nbsp;(total&nbsp;width&nbsp;of&nbsp;column&nbsp;gaps)110px&nbsp;/&nbsp;12&nbsp;=&nbsp;9.1667px&nbsp;(amount&nbsp;to&nbsp;be&nbsp;deducted&nbsp;from&nbsp;each&nbsp;column).grid&nbsp;{ &nbsp;&nbsp;display:&nbsp;grid; &nbsp;&nbsp;grid-template-columns:&nbsp;repeat(12,&nbsp;calc(8.3333%&nbsp;-&nbsp;9.1667px)); &nbsp;&nbsp;grid-column-gap:&nbsp;10px; &nbsp;&nbsp;grid-row-gap:&nbsp;10px; &nbsp;&nbsp;justify-content:&nbsp;center;}.l-1&nbsp;{&nbsp;grid-column-start:&nbsp;span&nbsp;1;&nbsp;}.l-2&nbsp;{&nbsp;grid-column-start:&nbsp;span&nbsp;2;&nbsp;}.l-3&nbsp;{&nbsp;grid-column-start:&nbsp;span&nbsp;3;&nbsp;}.l-4&nbsp;{&nbsp;grid-column-start:&nbsp;span&nbsp;4;&nbsp;}.l-5&nbsp;{&nbsp;grid-column-start:&nbsp;span&nbsp;5;&nbsp;}.l-6&nbsp;{&nbsp;grid-column-start:&nbsp;span&nbsp;6;&nbsp;}.l-7&nbsp;{&nbsp;grid-column-start:&nbsp;span&nbsp;7;&nbsp;}.l-8&nbsp;{&nbsp;grid-column-start:&nbsp;span&nbsp;8;&nbsp;}.l-9&nbsp;{&nbsp;grid-column-start:&nbsp;span&nbsp;9;&nbsp;}.l-10&nbsp;{&nbsp;grid-column-start:&nbsp;span&nbsp;10;&nbsp;}.l-11&nbsp;{&nbsp;grid-column-start:&nbsp;span&nbsp;11;&nbsp;}.l-12&nbsp;{&nbsp;grid-column-start:&nbsp;span&nbsp;12;&nbsp;}[class*=l-]&nbsp;{&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;red;&nbsp;}<div&nbsp;class="grid"> &nbsp;&nbsp;<div&nbsp;class="l-6">Column&nbsp;1</div> &nbsp;&nbsp;<div&nbsp;class="l-6">Column&nbsp;2</div> &nbsp;&nbsp;<div&nbsp;class="l-3">Column&nbsp;3</div> &nbsp;&nbsp;<div&nbsp;class="l-4">Column&nbsp;4</div> &nbsp;&nbsp;<div&nbsp;class="l-3">Column&nbsp;5</div> &nbsp;&nbsp;<div&nbsp;class="l-2">Column&nbsp;6</div> &nbsp;&nbsp;<div&nbsp;class="l-1">Column&nbsp;7</div> &nbsp;&nbsp;<div&nbsp;class="l-10">Column&nbsp;8</div> &nbsp;&nbsp;<div&nbsp;class="l-1">Column&nbsp;9</div> &nbsp;&nbsp;<div&nbsp;class="l-5">Column&nbsp;10</div> &nbsp;&nbsp;<div&nbsp;class="l-5">Column&nbsp;11</div> &nbsp;&nbsp;<div&nbsp;class="l-2">Column&nbsp;12</div></div>