4 ms·
It's not quite the same, but CSS grid does make creating those kind of high level layouts much, much easier with `grid-template-areas`: .header { g
by worble 5y ago
It's not quite the same, but CSS grid does make creating those kind of high level layouts much, much easier with `grid-template-areas`:
.header {
grid-area: hd;
}
.footer {
grid-area: ft;
}
.content {
grid-area: main;
}
.sidebar {
grid-area: sd;
}
.wrapper {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"hd hd hd hd hd hd hd hd hd"
"sd sd sd main main main main main main"
". . . ft ft ft ft ft ft";
}
Way more declarative, in my opinion.
For fitting it all in one page, you can make the containing grid 100vh and ensure content takes all the extra free space, see this pen (from Mozilla) for an example: https://codepen.io/miriamsuzanne/pen/JjPeQYP?editors=0100 https://codepen.io/miriamsuzanne/pen/JjPeQYP?editors=0100
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...