为什么 Chrome 80 会导致这个 grid-template-rows: auto 问题

Question

有人知道最新的 Chrome 80 更新是怎么回事吗？

似乎

grid-template-rows: auto

即使标记中不存在给定行，也从现在开始占用一些空间。仅在 Chrome 80+ 上发生。

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

另见：https : //jsfiddle.net/ju4xvegf/

铬 80

火狐 72

Answer 1

我不确定这是一个错误还是 CSS 网格算法中的某些内容发生了变化（需要修改规范），但您可以简化您的逻辑，如下所示：

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

更新

使用您的初始代码，如果您minmax(1px,1fr)只更改1fr它应该可以正常工作。

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

似乎新版本的 chrome 正在解决minmax(1px,1fr)不同的问题。您可以尝试1px缓慢增加 的值，并注意minmax()将如何使行变大。

请注意，1fr相当于minmax(auto,1fr) https://github.com/w3c/csswg-drafts/issues/1777

具有类似问题的相关问题：Chrome 80 中的网格模板列不一致计算