如何使用CSS网格

Question

我是一个菜鸟网络开发人员，正在尝试开发我的第一个网站。我在理解CSS网格系统时遇到问题。在我的代码中，我有一个容器div，它是我在css中定义网格的位置，在我在css中定义网格的位置，我想我要创建四列，所以我的子div应该放置吗？彼此相邻？一个人坐在另一个人的上面，我不知道该如何解决。这是我写的：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  border-style: dotted;
}

#app {
  border-style: dotted;
  background-color: red;
  margin-top: 30px;
}

.otherStuff {
  background-color: green;
}

<div class="grid">
  <div id="app">
    <h1> hello</h1>
    <p>world</p>
  </div>
  <div class="otherStuff">
    <h1> otherStuff </h1>
  </div>
</div>