如何避免CSS Grid拉伸行？

Question

下面的代码（部分）非常hacky，但它展示了我想要实现的效果：导航元素的（自动）高度与其内容匹配，而侧边栏完全延伸（与主体一起）。

但是，如果我删除两个hacky grid-row声明（用span 998/999），则导航将被拉伸，从而导航和侧边栏具有相同的高度，这不是我想要的。

有什么简洁的方法可以实现所需的结果吗？

div {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-areas: "main nav" "main aside";
  text-align: center;
}

main {
  grid-area: main;
  background: silver;
  line-height: 8;
  grid-row: 1 / span 999;
}

nav {
  grid-area: nav;
  background: grey;
  grid-row: 1;
}

aside {
  grid-area: aside;
  background: lightgray;
  grid-row: 2 / span 998;
}

<div>

  <nav>nav: just a few links</nav>
  <main>main:<br>very<br>long<br>content</main>
  <aside>aside: short content</aside>

</div>

- EricBln

Answer 1

你可以像下面这样优化你的代码。关键在于使用 grid-template-rows:auto 1fr;。

div {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows:auto 1fr;
  grid-auto-flow:dense;
  text-align: center;
}

main {
  background: silver;
  line-height: 8;
  grid-row:span 2;
}

nav {
  background: grey;
  grid-column: 2;
}

aside {
  background: lightgray;
}

<div>

  <nav>nav: just a few links</nav>
  <main>main:<br>very<br>long<br>content</main>
  <aside>aside: short content</aside>

</div>

- Temani Afif