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