CSS子网格容器不从父网格继承

Question

我有这个（Erb）HTML：

<article class="grid-container">
  <header class="grid-centered">
    <h1><%= @post.title %></h1>
  </header>
  <div class="content grid-reading grid-item-max grid-container">
    <%= markdown(@post.body) %>
  </div>
</article>

<%= >%将在之间运行代码并输出HTML字符串。

和CSS：

.grid-container {
  display: grid;
  grid-template-columns: repeat(24, 1fr); 
}

.grid-centered {
  grid-column: 4 / span 18; 
}

.grid-item {
  grid-column: 3 / -3; the end
  width:100%
}

.grid-reading {
  grid-column: 6 / span 14; 
}

.grid-item-max {
  grid-column: 1 / -1; 
}

.content p {
  grid-column: 6 / span 14;
}

两篇文章的内容相同，但渲染结果不同。

工作：

---
layout: post
title: Works
url: works
---

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

正在使用的屏幕截图：

无效内容：

---
layout: post
title: Works
url: works
---

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

无法使用的屏幕截图：

不工作的人的网格受到挤压。

我尝试过Codepen，但无法复制它：

https://codepen.io/JuanitoFatas/pen/KKwdjMx

具有相同内容的两个页面使用相同的HTML和CSS呈现的方式有所不同。

任何指针或调试建议？谢谢！

在macOS 10.15.1上使用Firefox 71.0（Safari 13.0.3也有同样的问题：/）

Answer 1

结果是不工作的帖子，实际上我在页面底部有一些嵌套元素，我没有CSS来控制它们，它们落在网格内，因此它们脱离网格并导致上面的网格列受到挤压。很抱歉在这里简化了这个问题。