CSS网格生成比现有更多的列

Question

我有一个用于大屏幕@media (min-width: 800px)的网格（）在下一个指令中使用12列的网格：

grid-template-columns: repeat(12, [col-start] 1fr);

但是对于移动设备，我改用：

grid-template-columns: repeat(4, [col-start] 1fr);

到这里为止一切都很好，没有明显的问题。但是，如果我添加grid-gap: 1rem;一个问题，那么对于小屏幕来说，问题就变得很明显了，因为即使我指定了4列，它也被当作12列，其中4列的宽度为25％，其余的为0px，因此css的行为不佳。

我暂时无法在JSFiddle中重现它，但是我对此问题有一些了解。

对于大屏幕上的12列：

应用的样式：（其他计算值）

 @media (min-width: 800px) {
   .my-grid {
     display: grid;
     padding: 2.5rem 4.875rem 0 4.875rem;
     grid-template-columns: repeat(12,[col-start] 1fr);
   }
 }

对于4列：

应用的样式：（其他计算值）

   .my-grid {
     display: grid;
     grid-template-columns: repeat(4,[col-start] 1fr);
     padding: 1rem;
   }

如您所见，4列网格的计算值设置了4列，其余的宽度为0px ...

在元素检查中，只有我上面写过的行。

知道为什么我们会有这种行为吗？

另外请注意，我使用的是样式组件，它是一个div。

Codepen错误

Answer 1

下方的元素的跨度为：

grid-column: 1 / span 12;

这迫使CSS网格具有12列。

如果我们删除下面的元素，则CSS网格的行为正常