3 ms·

I've run into CSS Grid more than once, but every time I do, I'm confused by it. I know I should probably just deep-dive into it. I have tried CSS Grid Garden i

I've run into CSS Grid more than once, but every time I do, I'm confused by it. I know I should probably just deep-dive into it. I have tried CSS Grid Garden in the past. I don't remember a damn thing from it.

jrochkind1 5y ago
I just finally learned grid, and now I wonder why I waited so long, it's incredibly powerful. This multi-part MDN guide worked for me. Had to read it twice. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
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 ago
  The 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 ago
    Same 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....
bradwoodsio 5y ago
This might help - https://layout.bradwoods.io/ https://layout.bradwoods.io/
tehbeard 5y ago
I have the following bookmarked and on the hotbar for this exact reason. I don't have to mess with frontend every day so they're not memorized. [1] https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ [2] https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/
- pdevr 5y ago
  I think this was it for me. I just spend some time reading through both of these pages, until it all came together.

jrochkind1 5y ago

I just finally learned grid, and now I wonder why I waited so long, it's incredibly powerful. This multi-part MDN guide worked for me. Had to read it twice. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...

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 ago
The 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 ago
  Same 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....

bradwoodsio 5y ago

This might help - https://layout.bradwoods.io/ https://layout.bradwoods.io/

tehbeard 5y ago

I have the following bookmarked and on the hotbar for this exact reason. I don't have to mess with frontend every day so they're not memorized. [1] https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ [2] https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/

pdevr 5y ago
I think this was it for me. I just spend some time reading through both of these pages, until it all came together.