Why does Chrome 80 cause this grid-template-rows: auto problem

Question

Is anyone aware what is up with the latest Chrome 80 update?

Seems like

grid-template-rows: auto

started taking up some space from now even when a given row is not present in the markup. Happens on Chrome 80+ only.

.l-page {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto minmax(1px, 1fr);
  /*  // 1px is needed because of https://stackoverflow.com/questions/49558290/container-scrolls-to-top-when-children-element-height-changes */
  grid-template-areas:
    'sidebar primary_bar'
    'sidebar notification'
    'sidebar content';
  width: 100vw;
  height: 100vh;
}

.l-sidebar {
  grid-area: sidebar;
  padding-right: 10px;
}

.l-notification {
  grid-area: notification;
}

.l-primary-bar {
  grid-area: primary_bar;
}

.l-content {
  grid-area: content;
}

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <!--<div class="l-notification"></div>
      <div class="l-primary-bar"></div>-->
  <div class="l-content">content</div>
</div>

See also: https://jsfiddle.net/ju4xvegf/

Chrome 80

Firefox 72

Answer 1

I am not sure if it's a bug or something has changed in the CSS grid algorithm (need to revise the Spec) but you can simplify your logic like below:

.l-page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 300px;
  margin:5px;
  border: 1px solid red;
}

.l-sidebar {
  grid-row: span 3;
  grid-column:-3;
  padding-right: 10px;
}

.l-primary-bar {
  order: 1;
}
.l-notification {
  order: 2;
}

.l-content {
  order: 3;
}

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <div class="l-notification">notif</div>
  <div class="l-primary-bar">bar</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <div class="l-notification">notif</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-primary-bar">bar</div>
  <div class="l-notification">notif</div>
  <div class="l-sidebar">sidebar</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-primary-bar">bar</div>
  <div class="l-notification">notif</div>
  <div class="l-content">content</div>
</div>

---

UPDATE

With your initial code, if you change minmax(1px,1fr) with only 1fr it should work fine.

.l-page {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    'sidebar primary_bar'
    'sidebar notification'
    'sidebar content';
    height: 300px;
  margin:5px;
  border: 1px solid red;
}

.l-sidebar {
  grid-area: sidebar;
  padding-right: 10px;
}

.l-notification {
  grid-area: notification;
}

.l-primary-bar {
  grid-area: primary_bar;
}

.l-content {
  grid-area: content;
}

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <div class="l-notification">notif</div>
  <div class="l-primary-bar">bar</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <div class="l-notification">notif</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-primary-bar">bar</div>
  <div class="l-notification">notif</div>
  <div class="l-sidebar">sidebar</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-primary-bar">bar</div>
  <div class="l-notification">notif</div>
  <div class="l-content">content</div>
</div>

It seems that the new version of chrome is resolving the minmax(1px,1fr) differently. You can try to increase the value of 1px slowly and notice how the minmax() will make the row bigger.

Note that 1fr is equivalent to minmax(auto,1fr) https://github.com/w3c/csswg-drafts/issues/1777

Related question having a similar issue: grid-template-columns in Chrome 80 inconsistently computed

Answer 2

NB: I'm distracted while writing this answer, and I haven't dived into CSS Grid in a while, so this is just my best guess as to what's going on.

I think this is related to your named grid-template-areas as well, not just your grid-template-rows setting. You have the following named areas in your CSS:

grid-template-areas:
    'sidebar primary_bar'
    'sidebar notification'
    'sidebar content';

But in your markup, you have two of those right-column divs commented out:

<!--<div class="l-notification"></div>
    <div class="l-primary-bar"></div>-->

Firefox, and Chrome prior to v80, appear to have ignored grid-template-areas that are empty or don't exist in the markup, hence why you see content on the same row as sidebar at the top. However, it looks like Chrome v80 has decided that, since you have declared multiple rows via your grid-template-areas property, it should reserve at least one row of space, perhaps using the following logic:

"collapse all empty rows into one row, then start rows with content on the next available row in the grid"

rather than what Chrome 79 (and Firefox 72) does:

"collapse all empty rows completely so that only rows with contents appear."

In short, you need to remove one of the named areas in your grid-template-areas property that you don't have markup for. I'll keep looking.