CSS：如何将第一个网格行设置为固定高度，然后为随后的动态网格行数分配高度

我正在使用网格。我的第一行是20px，我希望所有后续行使用

1fr

来均匀分布高度。我正在做

网格模板行：20px重复（2，1fr）

但这只适用于代码中设置的div数。我希望它能为动态的div数工作。我尝试了

网格模板行：20px重复（自动填充，1fr）但这只是将它们均匀地设置（即使是第一个）


html，正文{
身高：100%；
}
.集装箱{
显示：网格；
栅隙：20px；
网格模板列：20px 1fr；
网格模板行：20px重复（2，1fr）；
背景：绿色；
身高：100%；
}
.货柜组{
背景：灰色；
}

11
22
33
44
55
使用
网格自动行


正文{
保证金：0；
}
.集装箱{
显示：网格；
栅隙：20px；
网格模板列：20px 1fr；
网格模板行：20px；/*第一行20px*/
栅格自动行：1fr；/*所有其他1fr*/
背景：绿色；
高度：100vh；
}
.货柜组{
背景：灰色；
}

11
22
33
44
55
66
77
太酷了，谢谢！