Cannot layout a page using CSS grid / grid-template-areas

Question

I'm new to HTML, CSS & JS and this is the first time I've posted here. I've been trawling through here and spent a day or so on this issue but can't find a solution.

I'm trying to layout a homepage with CSS grid. I've tried using grid-template-areas to explicitly layout the page and also separately grid-template-columns & rows but my code doesn't seem to have any effect. I've tried a few different things. I'm sure it's something relatively small but I can't see it.

Here's a link to the Codepen - https://codepen.io/robGit28/pen/BajEdoz?editors=1100

Can someone please give me some guidance or advice?

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>

Michael Benjamin · Accepted Answer · 2020-07-26T12:48:23.330

I see three problems right off the bat. There may be more.

You have a header area in grid-template-areas. But the header name is not defined. You need to add header { grid-area: header }.

More information: Why are CSS named grid areas not in quotes?

The sidebar grid area has position: fixed applied. This takes it out of the normal flow of the document. As a result, most grid properties are ignored by this element.

More information: Centering absolutely positioned element in CSS Grid

The .sub-heading element is a child of the main element, which is a grid item. Grid properties apply only between parent and child elements. So .sub-heading, as a grandchild of the container, is ignoring the grid commands.

More information: Grid properties not working on elements inside grid container

That's awesome I really appreciate the help! I've implemented your suggestions and it's worked. There's obviously a lot I have forgotten and a lot left to learn — Robgit28, Jul 26 '20 at 12:57

Cannot layout a page using CSS grid / grid-template-areas

1 Answers1