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

2023年4月20日 172次阅读

是否可以创建定义某些区域(如页眉和页脚)的网格模板区域,同时允许在它们之间创建未知数量的行？

我将有用户生成的内容,所以我不知道有多少行要网格化.我想确保第一个和最后一个是页眉和页脚.

幻想的例子：

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

最佳答案 考虑使页眉和页脚之间的动态区域成为嵌套网格.

#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;
}
点赞