CSS网格模板列的最小最大值小于规定的最大值？

Question

display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
grid-auto-rows: 80px;
column-gap: 5px;
row-gap: 5px;
grid-auto-flow: dense;

我具有上面的代码来创建响应式网格。列的最小大小应为80px。我用div填充网格以使其可视化。他们是以下代码。

grid-row: span 4;
grid-column: span 4;
background-color: green;

grid-row: span 2;
grid-column: span 2;
background-color: red;

grid-row: span 8;
grid-column: span 2;
background-color: blue;

它在整个屏幕上都可以正常工作，并且在大多数情况下都可以响应，但是当我将窗口调整为可移动大小时，会产生一个额外的小列。

https://imgur.com/a/z21uRTb

以上链接中的检查器图片。绿色块应该是红色块的两倍，我认为它们是红色块，但是它们已被切断。您还可以看到网格轮廓在最后显示一个很小的列。为什么会发生这种情况，我以为网格会将绿色块放在新行上。

编辑：我相信是因为列间隙和行间隙是原因，并已将其删除。不知道如何将列间隙和行间隙保持在规定的minmax以下而没有意外的列。

Answer 1

如果要将最小大小设置为已设置自定义大小的每个子列，则可以在父级calculated column total number上使用auto-fit而不是grid-template-columns:repeat(auto-fit, minmax(80px, 1fr));。

grid-template-columns: repeat(8, minmax(80px,1fr));

如何获取8fr的计算结果？

红色的网格列：跨度2

蓝色的网格列：跨度2

绿色的网格列：跨度4

一行的网格列= 8（2（红色）+ 2（蓝色）+ 4（绿色））

grid-column: span 2;
background-color: red;

grid-column: span 2;
background-color: blue;

grid-column: span 4;
background-color: green;