如何创建所有未知行数都具有相等高度但最后一行不相等的网格布局？

Question

我正在创建一个行数未知的表单，但是最后一行应该固定高度，其中包含表单动作按钮，现在该如何在网格系统中编写它。

这是主要的容器CSS属性

{
     display:grid;
     grid-template-area: 'body' 'button';
     grid-template-row: 1fr 80px 
     grid-auto-flow: row;
     grid-gap: 10px
 }

我知道grid-template-row: 1fr 80px将创建一行，下一行为80px；

我需要写这样的repeat(x, 1fr), 80px

如何使用CSS Grid Layout实现此目标  

Answer 1

尝试grid-template-rows: repeat(auto-fill, 1fr) 80px;

这应该可以完成您要完成的任务。