如何避免CSS网格拉伸行？

Question

下面的代码（部分）非常hacky，但是它显示了我想要实现的目标：nav元素的（自动）高度与它的内容匹配，而一边一直向下延伸（与main一起）。

但是，如果我删除两个hacky的网格行声明（跨度为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>

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>