css-grid rendering differently on Firefox and Chrome

Question

I'm learning about css-grid and am running into cross-browser (Firefox and Chrome) rendering differences when using grid areas and percentage-sized rows/columns. See my demo of this issue here: https://codepen.io/anon/pen/qQyKNO

See the MVCE containing the HTML/CSS below:

/* CSS Reset */
html 
{
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust:     100%;
}
body { margin: 0; }
.p1  { padding: 1rem; }
img  { display: block; border: 0; width: 100%; height: auto; }

/* General Styles */
.navbar       { background: white; border-bottom: 1px solid black; }
.logo         { background: #212121;}
.sidebar      { background: #212121; color: white; }
.main-content { background: white; }
.colophon     { background: #1c1e1e; color: white; }

/* CSS Grid layout */
@supports (display: grid) 
{
  @media screen and (min-width: 1440px) 
  {
    .site 
    {
      display: grid;
      grid-template-columns: 15% 85%;
      grid-template-rows: 10% 70% 20%;
      grid-template-areas:
        "logo navbar"
        "sidebar main"
        "sidebar footer";
    }

    .logo { grid-area: logo; }
    .navbar { grid-area: navbar; }
    .sidebar { grid-area: sidebar; }
    .main-content { grid-area: main; }
    .colophon { grid-area: footer; }

    }
}

And here is the relevant HTML:

<div class="site">
  <nav class="p1 navbar">
    <strong>Project</strong>
    <p><a href="/dashboard/">Portal</a> / Dashboard</p>
    <a href="/faq/" target="_blank">Need Help?</a>
  </nav>

  <div class="p1 logo">
    <img src="https://www.stockvault.net/data/2010/09/20/114878/thumb16.jpg">
  </div>

  <aside class="p1 sidebar">
    <ul>
      <li><a href="/dashboard/">Your Dashboard</a></li>
      <li><a href="/premium/">Premium</a></li>
    </ul>
  </aside>

  <main class="p1 main-content">Lorem ipsum</main>

  <footer class="p1 colophon"><h2>Location:</h2>123 Main St</footer>
</div>

Here's a picture showing the rendering error in my installation of Chrome, Version 70.0.3538.102 (Official Build) (64-bit) on macOS.

Edit: I've updated the grid-template-rows to be specified by vh units rather than % , however I'm still seeing rendering issues, now in both Firefox and Chrome :

.site {
  display: grid;
  grid-template-columns: 15vw 85vw;
  grid-template-rows: 10vh 70vh 20vh;
  grid-template-areas:
        "logo navbar"
        "sidebar main"
        "sidebar footer";
}

Answer 1

If you going to use percentages, like this:

.site {
    display: grid;
    grid-template-rows: 10% 70% 20%;
 }

Then you need to give the rows a reference point. (Percentage lengths use the height / width of the parent as reference. If there's no parent reference, the element with a percentage length defaults to height: auto (content-size)).

Add this to your code:

.site {
    display: grid;
    grid-template-rows: 10% 70% 20%;
    height: 100vh; /* new */
 }

OR (simpler and possibly more stable across browsers)

.site {
    display: grid;
    grid-template-rows: 10vh 70vh 20vh;
 }

More details:

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent (solutions apply to Grid, as well)