我对HTML，CSS和amp； 这是我第一次在这里发帖。 我一直在这里搜寻，花了一天左右的时间在这个问题上，但找不到一个解决办法。

我正在尝试用CSS网格布局一个主页。 我已经尝试使用网格模板区域显式布局页面，也单独使用网格模板列&； 行，但我的代码似乎没有任何作用。 我试过几种不同的方法。 我肯定是个比较小的东西，但我看不见。

以下是代码pen的链接-https://Codepen.io/robgit28/pen/bajedoz?editors=1100

有人能给我一些指导或建议吗？

null

body {
  background-color: yellow;
  color: black;
  font-family: Georgia, sans-serif;
  font-size: 16px;
  font-weight: 100;
}

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr 2fr 1fr;
  grid-template-areas: "button header header" "sidebar hi ." "sidebar sub-heading ." "sidebar footer footer";
  height: 100vh;
  width: 100vw;
}

.footer {
  grid-area: footer;
}

.sub-heading {
  grid-area: sub-heading;
}


/* nav menu button */

.btn-toggle-nav {
  width: 60px;
  height: 60px;
  position: fixed;
  left: 0px;
  top: 0px;
  background-color: yellow;
  background-image: url("sideNavBar.png");
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: center;
  cursor: pointer;
  transition: 1s;
  grid-area: button;
}


/* nav menu button animation */

.btn-toggle-nav:hover {
  opacity: 0.7;
}


/* nav menu sidebar */

.nav-sidebar {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 50px;
  background-color: yellow;
  padding: 0px 5px;
  height: calc(100vh - 60px);
  z-index: 100;
  transition: all 0.3s ease-in-out;
  grid-area: sidebar;
}

.nav-sidebar ul {
  padding-top: 15px;
  overflow: hidden;
  visibility: hidden;
}


/* side navbar list */

.nav-sidebar ul li {
  list-style: none;
  line-height: 60px;
}


/* text within side navbar */

.nav-sidebar ul li a {
  font-size: 16px;
  font-family: arial;
  color: black;
  display: block;
  height: 60px;
  padding: 0px 0px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}


/* highlight when hover over nav sidebar */

.nav-sidebar ul li a:hover {
  background-color: grey;
}


/* typing text animation */


/* .sub-heading {
      animation: typing-text 6s steps(60);
      white-space: nowrap;
      overflow: hidden;
      border-right: 4px black solid;
      width: 60ch;
      grid-column: 2 / 5;
      grid-row: 5 / 7;
    }
    @keyframes typing-text {
        0%{
          width: 0ch;
        }
        100%{
          width: 60ch;
        }
      } */

<div class="container">
  <div class="btn-toggle-nav" onclick="toggleNav()"></div>
  <aside class="nav-sidebar">
    <ul>
      <li><a href="./index.html">home</a></li>
      <li><a href="./about.html">about</a></li>
      <li><a href="./portfolio.html">projects</a></li>
      <li><a href="./contact.html">contact</a></li>
  </aside>
  <header>
  </header>
  <main>
    <h1 class="heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h1>
    <h2 class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h2>
  </main>
  <footer>
    <div class="footer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>
  </footer>
</div>

null