在我开始之前，我想说的是，我花了一些时间来研究我将要描述的主题，我觉得这不应该被标记为重复，因为我无法找到一个清晰的解决方案来解决我的问题......也就是说，CSS网格如何确定网格容器中存在的网格项何时会在布局中相互叠加，或者当它们分配的网格区域逻辑上重叠时，即当它们被分配了一些相同的网格区域时，它们是否将在布局中彼此移位。
最近我正在学习一个流行的CSS网格学习工具，一个名为https://cssgridgarden.com/的游戏，我遇到了一个挑战，演示了网格项可以重叠。引用游戏：“你可以重叠他们没有任何麻烦”.这是罚款.我继续...没有明显的问题.这里是一些游戏截图：screenshot of CSS Garden gamescreenshot of CSS Garden game
我当时，过了一会儿，通过另一个流行的学习工具，Scrimba，这是。在他们的课程之一“学习CSS网格”，有一些代码，我开始尝试，我复制的代码，并创建了我自己的codepen与它。
超文本：

<div class="container">
  <div class="header">HEADER</div>
  <div class="menu">MENU</div>
  <div class="content">CONTENT</div>
  <div class="footer">FOOTER</div>
</div>

以及CSS：

.container {
    border: 5px dotted red;
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 40px 200px 40px; }
.container > * {
  border: 2px solid green; }
.header {
    grid-column: 2 / -1; }
.menu {
    grid-row: 1 / -1; }
.content {
    grid-column: 2 / -1; }
.footer {
    grid-column: 1 / -1; }

这是codepens模拟浏览器上的输出：Codepen output你可以在这里看到页脚区域已经从底部的网格中推出。它存在于网格之外，超出了.menu项。我还尝试将以下规则添加到.footer类grid-row: 2 / -1;中，这在视觉上根本没有改变布局。
我还用我以前创建的一个codepen进行了检查，它的行为似乎与此相反，其中网格项确实彼此重叠，并且看起来重叠，并且彼此分层。
超文本：

<div class="board">
  <div class="water">content</div>
  <div class="soil">content</div>
</div>

CSS：

.board {
  width:100vw;
  height:100vh;
  display: grid;
  grid-template-columns:
    20% 20% 20% 20% 20%;
  grid-template-rows:
    20% 20% 20% 20% 20%;
}
.water {
  grid-row: 2 / 5;
  grid-column: 3 / 5;
  background-color:rgba(10,10,250,.5);
}
.soil {
  grid-row: 3 / 3;
  grid-column: 2 / 6;
  background-color:rgba(100,50,5,.5);
}

下面是它在codepen浏览器中的样子：Codepen output
后一个例子中的网格项明显重叠......所以当我在第一个例子中进行实验时，我显然感到困惑，并看到一些网格项的显式放置似乎会“碰撞”周围的其他项目，甚至会将它们完全“碰撞”出网格。
谢谢你的阅读。如果有人能为我解释一下这个主题，我将不胜感激。谢谢。
更新：根据要求，我提供了一个我的问题的例子，只是这次我明确地设置了所有网格项目的网格位置。你会看到，我在许多项目上使用了-1，使它们运行到网格的边缘，我希望这会使它们与“菜单”区域重叠......这并没有发生......再次感谢阅读。
下面是更新后的codepen：超文本：

<div class="container">
  <div class="header">HEADER does not overlap with menu</div>
  <div class="menu">MENU</div>
  <div class="content">CONTENT</div>
  <div class="footer">FOOTER</div>
</div>

CSS：

.container {
    width: 95vw;
    height: 50vh;
    border: 5px dotted red;
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr) }
.container > * {
  border: 2px solid green; }
.header {
    grid-column: 1 / -1;
    grid-row: 1 / 2}
.menu {
    grid-row: 1 / -1;
    grid-column: 4 / -1;}
.content {
    grid-column: 1 / -1;
    grid-row: 2 / 5}
.footer {
    grid-column: 1 / -1;
    grid-row: 5 / -1;}

和codepen浏览器的输出：codepen browser