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

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 网格布局来实现这一点 。

Answer 1

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

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