无法使用 CSS 网格/网格模板区域布局页面

Question

我是 HTML、CSS 和 JS 的新手，这是我第一次在这里发帖。我一直在这里拖网并在这个问题上花了一天左右的时间，但找不到解决方案。

我正在尝试使用 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>

Answer 1

我马上就看到了三个问题。可能还有更多。

1. 您在grid-template-areas 中有一个header 区域。但header 名称未定义。您需要添加header { grid-area: header }。

   更多信息：Why are CSS named grid areas not in quotes?

---

1. sidebar 网格区域应用了position: fixed。这使它脱离了文档的正常流程。因此，该元素会忽略大多数网格属性。

   更多信息：Centering absolutely positioned element in CSS Grid

---

1. .sub-heading 元素是main 元素的子元素，它是一个网格项。网格属性仅适用于父元素和子元素之间。所以.sub-heading，作为容器的孙子，忽略了网格命令。

   更多信息：Grid properties not working on elements inside grid container