为什么在代码中使用 grid-template-rows 时 css 网格行高被破坏？

Question

我刚开始学习 css 网格，我运行遇到了一个问题。我不知道该怎么做，但我认为我的代码没问题，因为它确实通过了验证（html 和 css）。我在我的 css 中使用了 grid-template-rows，但是显示就像没有使用过一样。如果我向我的 html 块之一添加更多文本（例如：header），那么该行将变得更高 - 因此即使使用 grid-template-rows 它也像自动一样。此外，菜单上方和下方都有白色 space。我已经为此大惊小怪了两天了，找不到问题所在。我没看错什么？

.container {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 23.2% 76.8%;
  grid-template-rows: 30.0% 8.0% 50.0% 12.0%;
  color: white;
}
.header {
  grid-column: 1/3;
  grid-row: 1/2;
  background-color: red;
}
.menu {
  grid-column: 1/3;
  grid-row: 2/3;
  background-color: blue;
}
.sidebar {
  grid-column: 1/2;
  grid-row: 3/4;
  background-color: yellow;
}
.main {
  grid-column: 2/3;
  grid-row: 3/4;
  background-color: green;
}
.footer {
  grid-column: 1/3;
  grid-row: 4/5;
  background-color: orange;
}

<!doctype HTML>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href="./style.css">
      <script src="./code.js"></script>
      <title>TEST SITE</title>
   </head>

   <body class="container">

     <header class="header">
       <p>Header</p>
     </header><!-- header -->
     <menu class="menu">
       <p>Menu</p>
     </menu><!-- menu -->
     <aside class="sidebar">
       <p>Sidebar</p>
     </aside><!-- aside -->
     <main class="main">
       <p>Body</p>
     </main><!-- main -->
     <footer class="footer">
       <p>Footer</p>
     </footer><!-- footer -->
   </body><!-- body -->
</html><!-- html -->

Firefox 57.0.4

Opera 50.0.2762.58

Answer 1

使用百分比单位创建网格时，需要适当的维度链才能计算出百分比。在这里，BODY 被用作网格，因此请确保样式中包含以下行：

html, body { 
  width: 100%; height: 100%; 
}

Answer 2

您应该从 body 中删除 class 容器并将其放入 div 中。您的代码应该如下所示。

<div class="container">
<header class="header">
       <p>Header</p>
     </header><!-- header -->
     <menu class="menu">
       <p>Menu</p>
     </menu><!-- menu -->
     <aside class="sidebar">
       <p>Sidebar</p>
     </aside><!-- aside -->
     <main class="main">
       <p>Body</p>
     </main><!-- main -->
     <footer class="footer">
       <p>Footer</p>
     </footer><!-- footer -->
</div>

为什么在代码中使用 grid-template-rows 时 css 网格行高被破坏？

Why is css grid row height smashed when grid-template-rows is being used in code?

html

css

css-grid