Html CSS-确保CSS网格的前两行等于屏幕的剩余高度（不包括页眉）

我想知道CSS网格的前两行是否等于屏幕的高度（不包括标题）。标题下方的内容容器已设置为overflow:auto，但我只希望网格的前两行等于内容容器的高度（无溢出）。我的网格总共有3行，基本上，我希望前两行占据容器的整个高度而不会溢出，然后第三行对屏幕完全不可见，除非容器向下滚动。请务必让我知道我的解释是否令人困惑，因为我是CSS网格新手，不太确定我的解释是否充分。谢谢大家，我期待着你们的回复

下面是我的HTML布局示例

<div class='entire'>
    <div class='header'>Header</div>
    <div class='content'>
        <div class='grid'>
            item 1
            item 2
            item 3
        </div>
    </div>
</div>

.header

的高度应在CSS中定义。如果没有-应该由JS获取。让我们同意CSS中的定义

考虑到您最后对第一行和第二行的评论，这两行都应该放在一个屏幕上，第一行应该是自动高度，第二行-所有剩余高度，我看不到任何证据将第三块包含在

网格中。把它搬走

html，
身体{
保证金：0；
填充：0；
身高：100%；
}
.全部{
高度：100vh；
}
.标题{
背景：青色；
高度：20px；
}
.内容{
溢出：自动；
}
.电网{
/*减去.header的已知高度*/
高度：计算（100vh-20px）；
显示：网格；
网格模板列：1fr；
/*这将使第一排自动高度和第二排-所有其他*/
网格模板行：自动1fr；
}
.项目1{
背景：#eee；
}
.项目2{
背景：ddd；
}
.项目3{
背景：#ccc；
高度：100vh；
}

标题
项目1
项目2
项目3

除非知道收割台的高度，否则我认为这是不可能的。如果我得到收割台的高度，我必须使用calc（）来获得剩余的高度？如何通过指定我希望计算的高度跨越2行来将其合并到网格中？如果您知道标题的高度，则可以计算内容div的高度，然后网格行将为该高度的50%。不是吗？哦，对不起，我忘了提一下，我希望第一排的高度是自动的，第二排的高度占那个集装箱的剩余高度，有没有一个简单的方法可以做到这一点？哦，谢谢！我没有想到要把第三项从表格中删除，效果很好，谢谢！

.entire {
  height: 100vh;
}

.content {
  overflow: auto;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: ___ ____ ____;
}