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))。
但是，如果我使用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>
如果有人能解释为什么百分比宽度会产生如此大的影响，那将是很好的。
问题答案：
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%）的整个宽度，然后除以12100% / 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 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Column 9Column 10Column 11Column 12
-
SWIG文档对这两个指令解释如下： > ：“SWIG提供了另一个带有指令的文件包含指令。的目的是从另一个SWIG接口文件或头文件收集某些信息，而不实际生成任何包装代码。此类信息通常包括类型声明（例如，typedef）以及可能用作接口中类声明基类的C类。" 我的问题是这两个指令之间有什么区别，使用它们的利弊是什么？ 顺便说一下，我只是想了解一些背景信息。我有一个简单的C-python扩展，当我使用上
-
每一个网格项目都有一个矩形的网格区域，这个网格区域定义了该网格项的包含块，对齐属性（justify-self 和 align-self）确定其实际位置。 网格项占用的单元格也会影响网格的行和列的大小，参看网格尺寸（Grid Sizing）。 网格区域在网格内的位置通过1个网格位置和1个网格跨度属性来定义： grid position 表示网格项在网格中的位置。该属性可以是确定的（被显式定义）或自动
-
问题内容： 我认为使用Flexbox无法实现这一点，因为每一行只能是适合其元素的最小高度，但是可以使用更新的CSS Grid来实现吗？ 明确地说，我希望网格中所有行的所有元素的高度相等，而不仅仅是每行。基本上，最高的“单元格”应规定所有单元格的高度，而不仅仅是其行中的单元格。 问题答案： 简短答案 如果目标是创建具有相等高度的行的网格，而网格中最高的单元格将设置所有行的高度，那么这是一种快速简单的
-
我认为使用Flexbox是不可能实现这一点的，因为每一行只能是适合其元素所需的最小高度，但使用较新的CSS网格可以实现这一点吗？ 明确地说，我希望网格中的所有元素在所有行上的高度相等，而不仅仅是每一行。基本上，最高的“单元格”应该指示所有单元格的高度，而不仅仅是其行中的单元格。
-
我试图了解Excel中DATEDIF（date1， date2，"d"）和DATEDIF（date1， date2，"yd"）之间的区别。在尝试处理闰年日期时非常混乱。 例如 < code > = DATEDIF(" 2020年2月29日"、" 2021年3月1日"、" yd")给出< code>0。 但是当我试图给予 给出。 还有一件事是 给出 29 和 给出28。 一些文章声称开始日期的年份用
-
我有一些本地json文件。例如: JSON 1 JSON 1修改 我必须比较这些Json文件（在这个示例中，姓名字段、姓氏字段、年龄字段和文本字段被修改），我必须计算它们之间的差异百分比（绘制饼图或任何其他图形）。有办法做到这一点吗？