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

Question

是否可以创建一个 grid-template-area 来定义某些区域（如页眉和页脚），同时允许在它们之间创建未知数量的行？

我会有用户生成的内容，所以我不知道要划分多少行。我想确保第一个和最后一个是页眉和页脚。

幻想的例子：

#grid {
    display: grid;
}

.big {
    grid-template-columns: repeat(3 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "header header header"
    "misc misc misc"
    [* * *] <---- unknown rows
    "footer footer footer";
}

.small {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "header"
    "misc"
    [*] <---- unknown rows
    "footer";
}

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;
}

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

Allow an unknown number of rows between header and footer grid items

css

css-grid