使用grid-template-rows时CSS Grid行高未生效且菜单有空白的问题

嘿，太懂你纠结两天的心情了！咱们来拆解下你遇到的CSS Grid问题～

问题根源 #

你用百分比设置了grid-template-rows，但浏览器要计算百分比高度的前提是父元素必须有明确的高度值。你的.container其实就是<body>标签，而<body>默认高度是由内部内容撑开的，没有固定的高度基准，所以你设置的30.0%、8.0%这些百分比根本没法被正确计算，最终就 fallback 成了默认的auto值——这就是为啥你给区块加文本后行高会被撑开，menu区块还出现了空白。

解决方案 #

咱们只需要给父元素链加上明确的高度就行，具体两步：

1. 给<html>和<body>设置100%高度，让它们铺满整个浏览器视口
2. 确保你的.container（也就是<body>）能继承这个高度

修改后的完整CSS代码如下：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container { 
  display: grid; 
  grid-template-columns: 23.2% 76.8%; 
  grid-template-rows: 30.0% 8.0% 50.0% 12.0%; 
  color: white; 
}

.header { grid-column: 1/3; grid-row: 1/2; background-color: red; }
.menu { grid-column: 1/3; grid-row: 2/3; background-color: blue; }
.sidebar { grid-column: 1/2; grid-row: 3/4; background-color: yellow; }
.main { grid-column: 2/3; grid-row: 3/4; background-color: green; }
.footer { grid-column: 1/3; grid-row: 4/5; background-color: orange; }

额外小技巧 #

如果你不想折腾父元素高度，也可以把百分比换成vh单位（视口高度单位），比如30vh代替30.0%，这样直接基于浏览器视口高度计算，不用设置父元素高度也能生效，代码会更简洁～

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