我对HTML、CSS和JS都很新，并且这是我第一次在这里发布帖子。我已经在这里搜索了很久，花了一天左右的时间来处理这个问题，但是找不到解决方案。
我试图使用CSS网格布局来布置主页。我尝试使用grid-template-areas来明确地布置页面，也尝试使用grid-template-columns和rows，但我的代码似乎没有任何效果。我尝试过几种不同的方法。我相信问题相对小，但我看不到它。
以下是Codepen链接：https://codepen.io/robGit28/pen/BajEdoz?editors=1100
请问有人可以给我一些指导或建议吗？
我试图使用CSS网格布局来布置主页。我尝试使用grid-template-areas来明确地布置页面，也尝试使用grid-template-columns和rows，但我的代码似乎没有任何效果。我尝试过几种不同的方法。我相信问题相对小，但我看不到它。
以下是Codepen链接：https://codepen.io/robGit28/pen/BajEdoz?editors=1100
请问有人可以给我一些指导或建议吗？
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>