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-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来控制它们落在网格内，因此它们脱离网格并导致上面的网格列受到挤压。很抱歉在这里简化了这个问题。