Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

css-grid

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";
}
like image 733
targetcreature Avatar asked Oct 13 '17 22:10

targetcreature


1 Answers

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;
}
like image 64
Michael Benjamin Avatar answered Sep 29 '22 21:09

Michael Benjamin