Is it possible to create a grid-template-area
that defines certain areas (like the header and footer), while allowing for an unknown amount of rows to be created between them?
I'll have user generated content, so I don't know how many rows to grid out. I'd like to ensure that the first and last are the header and footer.
Fantasy 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";
}
Consider making the dynamic area between the header and the footer a nested grid.
#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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With