在下面的代码片段中，我有一个position: fixed div，它不是网格布局的一部分，我有一个row-1和main网格行.
我希望main扩展到可用空间，我认为grid-template-rows: 6rem 1fr可以，但事实并非如此.
我还希望行之间的间隙更小，但在本例中grid-row-gap不起作用.
html {
scroll-behavior: smooth;
height: 100%;
}
body {
text-rendering: optimizeSpeed;
height: 100%;
}
#root {
height: 100%;
}
.container {
border: 10px solid green;
background: #f1f1f1;
display: grid;
align-items: center;
grid-template-areas:
"row-1"
"main";
grid-template-rows: 6rem 1fr;
grid-row-gap: 0;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
z-index: 10;
background: yellow;
height: 3rem;
}
.row-1 {
border: 10px solid blue;
grid-area: row-1;
}
.main {
border: 10px solid orange;
grid-area: main;
}<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main id="root">
<div class="fixed">Fixed</div>
<div class="container">
<div class="row-1">Row 1</div>
<div class="main">main</div>
</div>
</main>
</body>
</html>