CSS网格布局中的百分比和fr单位之间的差异 [英] The difference between percentage and fr units in CSS Grid Layout
问题描述
我在玩CSS网格布局，遇到一个我找不到答案的问题.
I am playing around with CSS Grid Layout and came across a question I cannot find an answer for.
请考虑以下示例:
: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))设置了百分比宽度，因此列超出了屏幕宽度.
As you can see the columns go out of the screen width because of the percentage width set with calc(100% / var(--grid-columns)).
但是，如果我使用fr单位，则效果很好:
But if I use fr units, it works perfectly:
: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>
用于找到答案的资源:
https://css-tricks.com/snippets/css/complete-guide-grid/
https://www.w3.org/TR/css- grid-1/
如果有人能解释为什么百分比宽度会产生如此大的影响，那将是很棒的事情.
Would be great if anyone could explain why the percentage widths make such a difference.
推荐答案
fr
fr单元仅适用于容器中的可用空间.
fr
The fr unit works only with the free space in the container.
所以在您的代码中:
grid-template-columns: repeat(12, 1fr);
...容器中的可用空间在12列之间平均分配.
... the free space in the container is distributed equally among 12 columns.
由于这些列仅处理可用空间，因此grid-column-gap不是一个因素.在确定fr长度之前将其从容器宽度中减去(规格参考).
Since the columns are only dealing with free space, grid-column-gap is not a factor. It was subtracted from the container width before the fr length was determined (spec reference).
这是浏览器进行计算的方式:
Here's how the browser does the calculation:
(free space - gutters) / 12 = 1fr
%
使用百分比时...
%
When you're using percentages...
grid-template-columns: repeat(12, calc(100% / 12));
...容器分为12列，每列的宽度为8.33333％.这是实际长度，与fr单位不同，该单位仅处理可用空间.
... the container is divided into 12 columns, each having a width of 8.33333%. This is an actual length, unlike the fr unit, which only deals with free space.
列长和网格间隙都被计入宽度.
Both the column lengths and grid gaps are factored into the width.
这是浏览器进行计算的方式:
Here's how the browser does the calculation:
8.33333% * 12 = 100%
+
11 * 10px = 110px
有明显的溢出.
(注意:grid-*-gap属性仅适用于网格项目之间，而不适用于项目和容器之间.这就是为什么网格间隙数为11而不是13的原因.)
(Note: grid-*-gap properties apply only between grid items – never between items and the container. That's why the number of grid-gaps is 11, not 13.)
这有效:
grid-template-columns: repeat(12, calc(8.3333% - 9.1667px));
细分为以下内容:
-
12列
12 columns
每列的宽度是通过将容器的整个宽度(100%)除以12来确定的.
the width of each column is determined by taking the full width of the container (100%) and dividing it by 12
100% / 12 = 8.3333% (individual column width)
然后减去列间距(有11个)
then subtract the column gaps (there are 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>
这篇关于CSS网格布局中的百分比和fr单位之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
