在页眉和页脚网格项之间允许未知数量的行

Question

是否可以创建定义某些区域（如页眉和页脚）的<div>，同时允许在它们之间创建未知数量的行？

我将拥有用户生成的内容，因此我不知道要排除多少行。我想确保第一个和最后一个是页眉和页脚。

幻想的例子：

grid-template-area

Answer 1

考虑将页眉和页脚之间的动态区域设置为嵌套网格。

#grid {
    display: grid;
}

.big {
    grid-template-columns: repeat(3 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "header header header"
    "misc misc misc"
    "flexible flexible flexible" <-- unknown number of rows inside
    "footer footer footer";
}

flexible {
   display: grid;
   grid-auto-rows: 60px; /* or whatever */
   grid-template-columns: 1fr;
}