Css网格模板-列的minmax小于规定的max？

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;