CSS Grid提供了fr单元，其功能类似于flex-grow。
flex-grow将容器中的可用空间分配给Flex项，而fr单元将容器中的可用空间分配给行/列。

• 从规格：*
  7.2.3.柔性灯罩：fr单元

灵活长度或<flex>是单位为fr的维度，它表示网格容器中自由空间的一部分。
(Note flex-grow应用于 flex items，而fr长度应用于 grid containers。）
所以在你的网格中，你有三行：
1.第一行是标题。您希望内容设置其高度。因此其高度设置为auto。
1.最后一行是页脚。您希望内容设置其高度。因此其高度设置为auto。
1.中间一行包含nav和main元素。您希望该行占据所有剩余的垂直空间。因此其高度设置为1fr。

.ctnr {
  display: grid;
  grid-template-rows: auto 1fr auto;  /* key rule */
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  grid-template-areas: "header header" 
                         "nav main" 
                       "footer footer";
}

header {
  grid-area: header;
  background: turquoise;
}

nav {
  grid-area: nav;
  background: grey;
}

main {
  grid-area: main;
  background: orange;
}

footer {
  grid-area: footer;
  background: yellow;
}

body {
  margin: 0;
}

个字符

jsFiddle demo

添加到接受的答案，与我的情况：有时一个<header>元素，并始终<main>和<footer>元素将出现在页面上，在彼此之下; <main>应该始终被拉伸（即flex-grow: 1，但对于网格）
我将grid-template-rows: auto 1fr auto;添加到父节点。这在所有3个节点都存在时有效，但在<header>缺失时无效。我通过添加以下内容修复了此问题：

修复：

父元素上的grid-template-rows: auto 1fr auto;
<main>上的grid-rows-end: span 2

说明：

<main>将始终占用2行。grid-template-rows是无限行数的模式，因此第1-3行是auto 1fr auto，第4-6行是相同的，第7-9行，.
当页面上有3个元素时，<header>将取第一行，值为auto，<main>将取第2行和第3行，值为1fr auto。<footer>将从第4行开始，这是包含auto的模式的新开始。
当只有2个元素时（因此没有<header>），<main>将占用第1和第2行，即auto 1fr，而<footer>将占用包含auto的第3行
带header：

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

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

main {
  grid-row-end: span 2;
}

header,
footer {
  background-color: hotpink;
}

个字符
无标题：

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

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

main {
  grid-row-end: span 2;
}

header,
footer {
  background-color: hotpink;
}

<main>main</main>
<footer>footer</footer>

的字符串