CSS Grid含position:fixed元素时1fr撑满、行间距失效问题

两个异常表现和position: fixed的脱离文档流元素没有直接关系，核心问题出在网格容器的高度与对齐规则设置上：

• fr单位的作用是按比例分配网格容器的剩余可用空间，你虽然给html、body、#root都设置了height: 100%，但网格容器.container本身没有设置高度，默认值为auto（高度由内部内容撑开），这种情况下不存在“剩余可用空间”的计算基准，1fr会退化为和auto一致的表现，仅占据内容所需高度，自然无法实现main区域自动填充剩余空间的效果。
• 你观察到的行之间的“空隙”不是grid-row-gap产生的：你给容器设置了align-items: center，所有网格项会在所属的网格轨道内垂直居中，当网格轨道高度大于内容本身高度时，项的上下会自动留出均等空白，这部分视觉空隙和gap无关，因此修改grid-row-gap不会产生效果。

• 给.container设置height: 100%，让它占满父级#root的全部高度，给fr单位提供计算基准；
• 移除容器上全局的align-items: center，避免网格项居中产生不必要的空隙，如果需要单个项的内容居中，单独给对应网格项设置align-self属性即可；
• 补充box-sizing: border-box，避免容器的边框、内边距被算在高度外导致页面出现多余滚动条；
• 给容器加上和fixed定位导航等高的顶部内边距，避免导航遮挡网格内容；
• 清除浏览器默认给body加的margin: 8px，避免视口出现多余边距。

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  text-rendering: optimizeSpeed;
  height: 100%;
  margin: 0; /* 清除浏览器默认边距 */
}

#root {
  height: 100%;
}

.container {
  border: 10px solid green;
  background: #f1f1f1;
  display: grid;
  height: 100%; /* 给网格容器明确高度 */
  box-sizing: border-box; /* 边框、内边距纳入总高度计算 */
  padding-top: 3rem; /* 避开顶部fixed导航 */
  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>

内容的提问来源于stack exchange，提问作者dagda1