如何避免CSS Grid拉伸行？实现导航自适应高度与侧边栏等高

嘿，这个Grid布局的坑我之前也踩过！用span 999这种超大值确实能临时解决问题，但总感觉不够优雅，而且依赖“Grid不会有这么多行”的假设，咱们换个符合规范的干净方案～

问题核心拆解 #

你遇到的问题本质是Grid默认的行高规则：当没有显式定义行高时，Grid会自动调整行高以适配该行最高元素的高度。移除hack后，Nav所在的第一行和Aside所在的第二行，会因为Main跨两行而被强制对齐，导致Nav被拉伸到和Aside等高，不符合需求。

干净实现方案：用grid-template-rows: auto 1fr控制行高 #

只需要给容器明确设置行高规则，再让Main跨两行即可，完全不需要任何hack：

修改后的完整代码 #

.container {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto 1fr; /* 关键：第一行自适应内容，第二行占剩余空间 */
  grid-template-areas: 
    "main nav" 
    "main aside";
  text-align: center;
}

main {
  grid-area: main;
  background: silver;
  line-height: 8;
  grid-row: 1 / 3; /* 让Main横跨第一、第二行 */
}

nav {
  grid-area: nav;
  background: grey;
  /* 移除原hack的grid-row声明，自动匹配第一行位置 */
}

aside {
  grid-area: aside;
  background: lightgray;
  /* 移除原hack的grid-row声明，自动匹配第二行位置 */
}

<div class="container">
  <nav>nav: just a few links</nav>
  <main>main:<br>very<br>long<br>content</main>
  <aside>aside: short content</aside>
</div>

为什么这个方案有效？ #

• grid-template-rows: auto 1fr：第一行的auto会根据Nav的内容自动调整高度，第二行的1fr会占据容器剩余的所有可用空间。
• grid-row: 1 / 3：让Main横跨两行，自然填满整个容器的高度。
• Nav和Aside不需要额外的行定位，Grid会根据grid-template-areas自动把它们放到对应的行里，Nav保持自身内容高度，Aside则被拉伸至第二行的底部。

这个写法完全遵循CSS Grid规范，逻辑清晰，维护起来也方便～

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