有人知道最新的 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/ https://jsfiddle.net/ju4xvegf/
Chrome 80
Firefox 72
我不确定这是一个错误还是 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>UPDATE
使用您的初始代码，如果您更改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 https://github.com/w3c/csswg-drafts/issues/1777
具有类似问题的相关问题：Chrome 80 中的网格模板列计算不一致 https://stackoverflow.com/q/60193734/8620333