How can I create a grid-template-area that defines specific areas (such as the header and footer), while allowing for an undetermined number of rows in between?
I anticipate user-generated content, so I am uncertain about the exact number of rows needed. However, I want to make sure the first and last rows are reserved for the header and footer respectively.
Here is a fictional example:
#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";
}