1

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";
}
Sean Pianka
  • 2,157
  • 2
  • 27
  • 43
  • Your codepen is rendering the same for me in Firefox and Chrome. What's the difference you're seeing? – Michael Benjamin Nov 27 '18 at 04:06
  • @Michael_B I've updated the OP with a picture showing the issue rendering. What version of Chrome are you running? – Sean Pianka Nov 27 '18 at 04:08
  • Chrome Version 70.0.3538.102 (Official Build) (64-bit) – Michael Benjamin Nov 27 '18 at 04:17
  • We're using the same version of Chrome, so it's confusing to me how our browsers could possibly be rendering different pages. The image I included above is from within an incognito-mode window where there should be none of my extensions interacting with the page (none of mine should mess with rendering regardless). – Sean Pianka Nov 27 '18 at 04:20
  • Well maybe the difference is in FF versions. I have 63.0.3 (64-bit) on this PC. – Michael Benjamin Nov 27 '18 at 04:21
  • 1
    In any case, try switching away from percentage heights, which can be tricky across browsers. Instead use `10vh 70vh 20vh`. No need to define a height on the container. See if that helps. – Michael Benjamin Nov 27 '18 at 04:22
  • I am also using FF 63.0.3 (64-bit) on this installation of macOS (and it seems to be rendering correctly within FF). I'm not exactly sure how to proceed with debugging this issue as it seems to be limited to my specific installation of Chrome. And okay, I will try swapping `%` for `vh` units. – Sean Pianka Nov 27 '18 at 04:23

1 Answers1

5

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:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • I appreciate the advice for adding `height: 100vh;` in order for the grid to span the entire height of the page. Would you recommend using percentages, fractions, or some other unit? Regardless, this change does not solve the rendering issues I'm experiencing on only Chrome. – Sean Pianka Nov 27 '18 at 04:15
  • 1
    I'm not seeing any differences between Chrome and FF. The `height: 100vh` on the grid container fixes the problem on both browsers on this end. – Michael Benjamin Nov 27 '18 at 04:18
  • It seems the "rendering issue" I'm experiencing is simply due to not specifying `auto` for the first row (as I was expecting to see the height of `navbar` expand to the size of the content). Specifying `grid-template-rows: auto 70vh 20vh;` fixed my issue. (although, I don't know if this is the best practice). – Sean Pianka Nov 27 '18 at 04:33
  • 1
    But what if the `auto` row ends up being taller than 10vh? Then your container will overflow the viewport. Maybe consider `auto 1fr 20vh` or `auto 70vh 1fr`. – Michael Benjamin Nov 27 '18 at 04:35
  • 1
    That is certainly a better solution to my goal: navbar minimally fits content, body minimally fits all content, footer is the same size regardless of content. I will fiddle with these values more, but using `fr` is a good approach. – Sean Pianka Nov 27 '18 at 04:36