Question

我是HTML，CSS和JS的新手，这是我第一次在这里发布。我已经在这里拖网捕捞，花了大约一天的时间解决这个问题，但是找不到解决方案。

我正在尝试使用CSS网格布局首页。我尝试使用grid-template-area显式地布局页面，也分别使用grid-template-columns和行，但是我的代码似乎没有任何效果。我尝试了一些不同的事情。我确定它相对较小，但看不到。

以下是指向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

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

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

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

sidebar网格区域已应用position: fixed。这使它脱离了正常的文档流程。结果，此元素将忽略大多数网格属性。

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

.sub-heading元素是main元素的子元素，而.sub-heading元素是一个网格项。网格属性仅适用于父元素和子元素之间。因此，Identifier 'f' has already been declared作为容器的孙代而忽略了网格命令。

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

无法使用CSS网格/网格模板区域区域

1 个答案: