css - 对齐不直，行不跨越？

Question

我在布局方面遇到了两个问题。 1) 页眉和页脚中的两个 div 没有对齐(只是稍微偏离) 2) 我正在为我的主要内容使用 grid-areas，但无法让它一直延伸到页脚。

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

如果您定义 grid-template-columns 或 grid-template-rows 您必须在 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>