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...

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

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

另外请注意，我使用的是 styled-components，它是 div。

Codepen with the error

Answer 1

下面的元素的跨度为：

grid-column: 1 / span 12;

This was forcing the CSS Grid to have 12 columns.

如果我们删除下面的那个元素，CSS 网格会正常运行

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

CSS Grid generating more columns than existing

css

grid

css-grid

styled-components