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://i.stack.imgur.com/3K1eI.jpg

检查员图片在上面的链接。 绿色方块的大小应该是红色方块的两倍，我认为它们是红色方块，但它们被切断了。 您还可以看到网格轮廓在最后显示一个非常小的列。 为什么会这样，我以为网格只会将绿色块放在新行上。

编辑：我相信列间距和行间距是原因，并已将其删除。 不确定我将如何保持列间距和行间距，而不会使意外的列低于规定的最小最大值。

Answer 1

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

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;