如何避免 CSS 网格拉伸行？答案

【问题标题】：How to avoid CSS grid stretching rows?如何避免 CSS 网格拉伸行？
【发布时间】：2020-05-19 23:36:39
【问题描述】：

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

但是，如果我删除两个 hacky 网格行声明（跨度为 998/999），nav 会被拉伸，因此 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>

【问题讨论】：

标签： html css css-grid

【解决方案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>

【讨论】：