CSS Grid生成的列比实际存在的列多

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%，其余为0像素，因此存在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列设置了宽度，其余的都是0像素宽度...

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

有什么想法，为什么会出现这种情况呢？

另外需要注意的是，我正在使用styled-components并且它是一个div。

带有错误的Codepen

- SirPeople

---

我也无法重现这个问题（codepen）。你能展示一下在小屏幕上应用到你的网格容器的样式吗？ - fen1x

刚刚更新了问题，附上两个链接：https://pastebin.com/BEqD9CJq 和 https://pastebin.com/AYhhea7C - SirPeople

请在问题中发布足够的代码以重现问题。 - Michael Benjamin

你没有发布足够的代码让我们解决它。 - Sanne

你好，正如我所说，我没有办法重现这个错误，而其中一个需求是重新创建该错误（这样更容易调试），但我回答了这个问题，因为我找到了发生这种情况的原因。 - SirPeople

Answer 1

下方的元素拥有一个跨度为：

grid-column: 1 / span 12;

这将强制 CSS Grid 拥有 12 个列。

如果我们删除下方的这个元素，CSS Grid 表现就会正常。

- SirPeople

Answer 2

这种情况通常发生在您的网格元素具有不属于您的网格的网格区域条目时。

.about_me{
  max-width: 900px;
  margin: 0 1.75rem 0;
}

.about_me__body {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 20px;
  align-items: center;
  margin: 1.75rem 14% 0.75rem;
  width: 100%;
  row-gap:30px;
}

.about_me__p4 {
    grid-area: image;
}

<div class="about_me">
    <article class="about_me__body">
        <h1 class="about_me__title">
            {{ .Description }}
        </h1>
        <div class="about_me__p1">
            {{ .Content }}
        </div>
        <div class="about_me__p2">
            {{ .Content }}
        </div>
        <div class="about_me__p3">
            
            {{ .Content }}
            
        </div>
        <div class="about_me__p4">
            
            {{ .Content }}
            
        </div>
        <div  class="about_me__p5">
            
            {{ .Content }}
            
        </div>
    </article>
</div>

在这里，about_me__p4有一个不存在的网格区域，因此破坏了整个布局。

- it_always_ends_with_a_j

---

嗨，感谢您的补充。问题仍然与答案中的代码有关，但记录下这一点也是很好的 :D - SirPeople

是的，这个在搜索引擎排名靠前，所以我觉得我可以补充一下 :) - it_always_ends_with_a_j