对齐不直，行不跨？

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>

Answer 2

  

页眉和页脚中的两个div不对齐

这是由于内容的宽度不同而引起的，在这种情况下，因为它取决于文本的长度以及字体和字体大小等。

您还没有指定列，所以会发生以下情况：

此处的字体为Times New Roman，默认为chrome，字体大小为16px

假设容器的宽度为300px，单词logo占33.77px，而navigation占71.09px

首先总结内容的长度

33.77 + 71.09 = 104.86000000000001

第二次从容器的宽度中减去

300 - 104.86000000000001 = 195.14

第三次将其拆分为网格项2

195.14 / 2 = 97.57

第四，我们将其添加到每个网格项目的长度中，这样容器将填满

*logo* takes 97.57 + 33.7 = 131.34
*navigation* takes 97.57 + 71.09 = 168.66
*sum equals container's width* 168.66 + 131.34 = 300

很好，我们该如何解决？

那么我们如何通过定义显式的偶数宽度来解决此问题（仅仅是因为您出于某些原因希望页脚与页眉对齐），或者我们可以像其他建议的答案一样使用fr单位定义列，但请记住，填充也会影响内容的长度。

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
  width: 300px;
}

.header {
  background-color: pink;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  grid-template-areas: 'logo nav';
}

.footer {
  background-color: pink;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  grid-template-areas: 'legal links'
}

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

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

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

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

.container div {
  animation:anim 10s linear infinite alternate;
}

@keyframes anim{
0%{
padding: 0em;
}
100%{
padding: 3em;
}
}

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

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

---

  

我正在使用网格区域作为我的主要内容，但是无法使其一直覆盖到页脚。

这是因为您定义了12行，但仅使用了5行

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"

.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"
    "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"
    "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>

我将定义一个高度，而不是定义12行，因为您只是将内容的高度（在这种情况下为 ）复制了12次