本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; }
602392714
清零编程群