html - 无法让我的网格以正确的方式显示？

Question

我一直在努力学习 CSS 网格，但遇到了一个问题，我的网格错乱了。 我知道内容不多，但我在尝试调试时删除了 .item 类。 非常感谢任何帮助!

css * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid-container {
  height: 100vh;
  border: 10px solid #ccc
}

<div class="grid-container">
  <div class="grid-item item-1">
    item 1
  </div>
  <div class="grid-container">
    <div class="grid-item item-2">
      item 2
    </div>
    <div class="grid-container">
      <div class="grid-item item-3">
        item 3
      </div>
      <div class="grid-container">
        <div class="grid-item item-4">
          item 4
        </div>
        <div class="grid-container">
          <div class="grid-item item-5">
            item 5
          </div>
        </div>

网站: Picture of the problem

Answer 1

您似乎没有正确关闭标签。包含 grid-container 类的 div 标签没有关闭。在你的 body 里，理想情况下你应该有这样的东西:

<div class="grid-container">
  <div class="grid-item item-1">
    item 1
  </div>
</div>
<div class="grid-container">
  <div class="grid-item item-2">
    item 2
  </div>
</div>
<div class="grid-container">
  <div class="grid-item item-3">
    item 3
  </div>
</div>
<div class="grid-container">
  <div class="grid-item item-4">
    item 4
  </div>
</div>
<div class="grid-container">
  <div class="grid-item item-5">
    item 5
  </div>
</div>