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列：

应用的样式：（Other computed values）

 @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列：

应用的样式：（Other computed values）

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

您可以看到4列网格的计算值设置了4列，其余列的宽度为0px ...

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

我们为什么会有这种行为的任何想法？

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

Codepen with the error

Answer 1

下面的元素的跨度为：

grid-column: 1 / span 12;

This was forcing the CSS Grid to have 12 columns.

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