3 ms·
Yes, nor flexbox nor grid are intuitive. And Classic Holy Grail Layout is not a one-liner but this: .ex5 .parent { display: grid; grid-templat
by c-smile 5y ago
Yes, nor flexbox nor grid are intuitive.
And Classic Holy Grail Layout is not a one-liner but this:
.ex5 .parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
.ex5 header {
padding: 2rem;
grid-column: 1 / 4;
}
.ex5 .left-side {
grid-column: 1 / 2;
}
.ex5 main {
grid-column: 2 / 3;
}
.ex5 .right-side {
grid-column: 3 / 4;
}
.ex5 footer {
grid-column: 1 / 4;
}
For the note, in Sciter (flow+flex units) that is definable as
main {
flow:grid(1 1 1,
2 5 3,
4 4 4);
}
main > :nth-child(5) { /*middle section */
width:*; /* takes all available space */
height:*;
}
https://terrainformatica.com/2018/12/11/10-years-of-flexboxing/ https://terrainformatica.com/2018/12/11/10-years-of-flexboxi...
- chrismorgan 5y agoThe key thing is that it’s the one line of `grid-template: auto 1fr auto / auto 1fr auto` that’s doing the heavy lifting in the layout. The job of assigning elements to their places could also use named areas: .ex5 .parent { display: grid; grid-template: auto 1fr auto / auto 1fr auto; grid-template-areas: "header header header" "left main right" "footer footer footer"; } .ex5 header { grid-area: header; } .ex5 .left-side { grid-area: left; } .ex5 main { grid-area: main; } .ex5 .right-side { grid-area: right; } .ex5 footer { grid-area: footer; } Or you could lean on auto placement more heavily: in the original code, the left/main/right grid-column declarations are superfluous, and `1 / -1` is arguably clearer than `1 / 4` for the header and footer: .ex5 .parent { display: grid; grid-template: auto 1fr auto / auto 1fr auto; } .ex5 header, .ex5 footer { grid-column: 1 / -1; }
- c-smile 5y agoSame thing with flow: .ex5 { flow: grid(header header header, lside main rside, footer footer footer); border-spacing: 3px; } main { float: "main"; } footer { float: "footer"; } In case of Sciter, single property flow and flex units define everything that flexbox and grid can do with 20+ properties. And note: flexbox breaks existing CSS box model, flow/flex units - do not. See: https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.htm https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox....