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

Question

I'm just getting started to learn css grid and I run into a problem. I don't know a lot how to do but I think my code is ok bc it did validate (the html and the css). I use grid-template-rows in my css but the display is like it not used or something. If I add more text to one of my html blocks (eg: header) then the row will become taller - so it acting like auto even with the grid-template-rows. Also, there is white space above and below menu. I been fussing over this for two days now and can't find the problem. What am I don't wrong?

.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

Need to change those MENU tags (invalid HTML) to NAV tags. Might fix the issue with whitespace there. — FilmFiddler, Jan 14 '18 at 10:33

score 2 · Accepted Answer · answered Jan 14 '18 at 10:37

When creating the grid using percentage units, a proper chain of dimensions needs to be in place for the percentages to work off. Here, the BODY is being used as the grid, so ensure that the following line is in the styling:

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

score 0 · Answer 2 · answered Jan 14 '18 at 12:09

you should remove your class container from the body and put it in a div. Your code should look like.

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

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

2 Answers2