5 ms·
My rule of thumb: 2d -> grid 1d -> flex For the resources, I recommend: Flexbox: https://flexboxfroggy.com/ https://flexboxfroggy.com/ Grid: https://cssgri
by KarimDaghari 6y ago
My rule of thumb:
2d -> grid
1d -> flex
For the resources, I recommend:
Flexbox: https://flexboxfroggy.com/ https://flexboxfroggy.com/
Grid: https://cssgridgarden.com/ https://cssgridgarden.com/
- pedroma 6y agoAgree. Grid is great for 2D layouts especially if you're going to shift stuff around (e.g. responsive versions of the layout). With Flexbox, you can sorta do it but it always feels way too hard, even if your layout is convenient enough to be able to use the order rule.
- KarimDaghari 6y ago> Grid is great for 2D layouts especially if you're going to shift stuff around (e.g. responsive versions of the layout). Exactly!
- nkozyra 6y agoThat's a very common rule of thumb. Where I struggle is that grid can do most of what flexbox does in 1d but ... generally simpler if you're relying on breakpoints to change your layout.
- KarimDaghari 6y agoThere are some things that grids aren't optimized for, one example that comes to mind is `justify/space-between` where you don't really need to think about the layout (by adjusting cols spans). But yeah, for structural layouts grids are better.
- nailer 6y agoMy rule: grid by default body, nav, header, article, section, figure, form, div, header, footer, button, .button { display: grid; } .button is gross but included as older Chrome/Edgium have issues using grid/flex on proper buttons.
- KarimDaghari 6y agonav, figure and button: why wouldn't flex cut it?
- nailer 6y agobecause they nearly always might have two dimensions. Good question. Think of a price button (to choose yearly payment, instead of monthly). ---- $299/year upfront * Less than $25 a month cancel anytime ---- * The symbol would be smaller, the number bigger, lined up in a horizontal row.
- KarimDaghari 6y agoI would use: `flex-direction: row`. And use wrap the number and asterisk in a `span` and style them as needed.
- deleted 6y ago[deleted]
- DiogenesKynikos 6y agoThe Flexbox tutorial is pretty good. You know you've reached a difficult level when it starts throwing Estonian instructions at you.
- keb_ 6y agoCan you elaborate what constitutes as 1D and 2D in web layouts?
- bradstewart 6y agoLaying out a set of tabs would be 1D (either horizontal or vertical). Laying out an page with headers, footers, and sidebars would be 2D (vertical and horizontal).
- schwartzworld 6y agobut headers, footers and sidebars are all trivial with flexbox. what's the advantage of grid in those cases?
- ehutch79 6y agoNope. You're probably abusing flexbox. This layout: | HEADER | |Nav|Content|Sidebar| | Footer | is more what we're talking about. You could do that, but it's not what flexbox was meant for. Try grid out. It will work easier for grid like layouts.
- schwartzworld 6y agoI know what layout you're talking about and it's trivial with flexbox. Why would you need a grid for that?
- bradstewart 6y agoYou don't _need_ grid, but it does make it simpler. You technically don't need flexbox either. In grid you can define this layout in a single construct. Whereas with flexbox, you're defining several nested flex elements to get there. You can think about the entire layout as a unit, rather than the horizontal parts first (sidebar/main content) then the vertical (header/footer) or vise versa.
- floppiplopp 6y agoExactly this! It's not grid vs flexbox, it is grid AND flexbox.