Alignment not straight and rows don't span?

Question

I am stuck on two issues with my layout. 1) The two divs in header and footer don't align up (just off slightly) 2) I am using grid-areas for my main content, but can't get it to span all the way down to the footer.

https://codepen.io/anon/pen/rEZwJY?editors=1100

.grid {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-template-areas:
    "header header header header header header header header header header header header"
    "main main main main main main main main main main main main"
    "footer footer footer footer footer footer footer footer footer footer footer footer"
}

.header {
  background-color: pink;
  grid-area: header;
  grid-gap: 1em;
  display: grid;
  grid-template-areas:
    "logo nav"
}

.main {
  background-color: pink;
  margin: 1em 0;
  grid-area: main;
  grid-gap: 1em;
  display: grid;
  grid-template-rows: repeat(12, 1fr);
  grid-template-areas:
    "sidebar content content content content newsletter"
    "sidebar content content content content newsletter"
    "sidebar content content content content newsletter"
    "sidebar content content content content newsletter"
    "sidebar content content content content newsletter"
}

.footer {
  background-color: pink;
  grid-area: footer;
  grid-gap: 1em;
  display: grid;
  grid-template-areas:
    "legal links"
}

.logo {
  background-color: hotpink;
  grid-area: logo;
}

.nav {
  background-color: hotpink;
  grid-area: nav;
}

.sidebar {
  background-color: hotpink;
  grid-area: sidebar;
}

.content {
  background-color: hotpink;
  grid-area: content;
}

.newsletter {
  background-color: hotpink;
  grid-area: newsletter;
}

.legal {
  background-color: hotpink;
  grid-area: legal;
}

.links {
  background-color: hotpink;
  grid-area: links;
}

.grid div {
  padding: 1em;
}

<div class="grid">
  <div class="header">
    <div class="logo">Logo</div>
    <div class="nav">Navigation</div>
  </div>
  
  <div class="main">
    <div class="sidebar">sidebar</div>
    <div class="content">content</div>
    <div class="newsletter">newsletter</div>
  </div>
  
  <div class="footer">
    <div class="legal">Legal</div>
    <div class="links">Links</div>
  </div>
</div>

Answer 1

If you define grid-template-columns or grid-template-rows you have to specify the same amount of units in your grid-template-areas!

html, body { margin: 0; }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "main"
    "main"
    "main"
    "main"
    "main"
    "main"
    "main"
    "main"
    "main"
    "footer";
  height: 100vh;
}

.header {
  background-color: pink;
  grid-area: header;
  grid-gap: 1em;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "logo nav";
}

.main {
  background-color: pink;
  margin: 1em 0;
  grid-area: main;
  grid-gap: 1em;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "sidebar content content content content newsletter";
}

.footer {
  background-color: pink;
  grid-area: footer;
  grid-gap: 1em;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "legal links";
}

.logo {
  background-color: hotpink;
  grid-area: logo;
}

.nav {
  background-color: hotpink;
  grid-area: nav;
}

.sidebar {
  background-color: hotpink;
  grid-area: sidebar;
}

.content {
  background-color: hotpink;
  grid-area: content;
}

.newsletter {
  background-color: hotpink;
  grid-area: newsletter;
}

.legal {
  background-color: hotpink;
  grid-area: legal;
}

.links {
  background-color: hotpink;
  grid-area: links;
}

.grid div {
  padding: 1em;
}

<div class="grid">
  <div class="header">
    <div class="logo">Logo</div>
    <div class="nav">Navigation</div>
  </div>

  <div class="main">
    <div class="sidebar">sidebar</div>
    <div class="content">content</div>
    <div class="newsletter">newsletter</div>
  </div>

  <div class="footer">
    <div class="legal">Legal</div>
    <div class="links">Links</div>
  </div>
</div>