html - 如何避免 CSS 网格拉伸(stretch)行？

Question

下面的代码(部分)非常笨拙，但它显示了我想要实现的目标:nav 元素的(自动)高度与其内容匹配，而side 一直向下拉伸(stretch)(与 main 一起)。

但是，如果我删除两个 hacky grid-row 声明(跨度为 998/999)，nav 将被拉伸(stretch)，因此 nav 和 side 具有相同的高度，这是我不想要的。

哪种方法是达到预期结果的干净方法？

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>