CSS Grid 生成的列多于现有列答案

【问题标题】：CSS Grid generating more columns than existingCSS Grid 生成的列多于现有列
【发布时间】：2019-04-23 18:23:05
【问题描述】：

我有一个用于大屏幕的网格 (@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

【问题讨论】：

我也无法重现此内容 (codepen)。您能否在小屏幕上展示应用于您的网格容器的样式？
刚刚用样式编辑了问题，还说我正在使用样式组件
您能否也说明一下真正应用了哪些样式？您可以在 DevTools 的 Styles 和 Computed 选项卡中找到它
刚刚用 2 个链接更新了问题：pastebin.com/BEqD9CJq 和 pastebin.com/AYhhea7C
请在问题中发布足够的代码以重现问题。

标签： css grid css-grid styled-components

【解决方案1】：

下面的元素的跨度为：

grid-column: 1 / span 12;

This was forcing the CSS Grid to have 12 columns.

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

【讨论】：