11 ms·

This is very useful. I always end up Googling vertical align for flexbox. In a rush, what would help me refresh flexbox knowledge is being able to drag and dro

This is very useful. I always end up Googling vertical align for flexbox. In a rush, what would help me refresh flexbox knowledge is being able to drag and drop the frog, snapped to a 3x3 grid, and get the flexbox CSS code as output. Still a very thoughtful tutorial. (EDIT: The reason I said the above is I've personally given up on keeping up with new CSS stuff. Having written CSS off and on since IE7 days, basically I have no energy to keep css tricks in memory, having lived through hand coding vendor prefix flags and whatever the new Chrome Canary is thrusting down the pipe)

dsego 3y ago
No tricks anymore, not much to keep up, flexbox and grid are the end-game. And for most UI cases flexbox is all you need, it's basically stack/group (or vbox/hbox), so you can arrange items vertically or horizontally. Learn flexbox, it's the most useful thing for layouts that's come to css, and it's really simple, there are options for spacing (gap), justify and align, that's pretty much 99% of cases right there.
- klabb3 3y ago
  Nesting of flexboxes can be tricky though – especially when you have elements that fill “the rest of the width/height”. I’ve found that grids are a little easier to maintain a flat hierarchy and avoid complexity, but the downside is it also doesn’t modularize that well – you need to compose all the cells together, some of which probably should belong in a child “component”.
  - dsego 3y ago
    Sub-grids will solve the grid in child component I think.
- qingcharles 3y ago
  I need the 1%. I want browser masonry support. Right now only Safari has it baked in properly, the rest I have to code around in a sub-optimal way: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la... I think Safari has it because the guy that wrote the spec now works at Apple. Not 100% sure of that, but seems that way. The code is in Chromium, just nobody ever hit the GO button.
  - krsdcbl 3y ago
    tbh I'm glad, not sure about patching in an extra magic keyword with it's own set of new properties to achieve one specific layout pattern popularized by a jQuery lib in css grid module. It would have been much cleaner to add "auto-span" utility to grid-column and grid-row that allow to define "overflow snapping" if items are larger than template definitions, with an option for grid-auto-flow to affect packing logic This draft feels like it's solving a single use case by stacking presets over the grid api instead of exposing tools to achieve that use case
- krsdcbl 3y ago
  The 1% are difficult to learn, because you only need them in 1% of the cases ;)

dsego 3y ago

No tricks anymore, not much to keep up, flexbox and grid are the end-game. And for most UI cases flexbox is all you need, it's basically stack/group (or vbox/hbox), so you can arrange items vertically or horizontally. Learn flexbox, it's the most useful thing for layouts that's come to css, and it's really simple, there are options for spacing (gap), justify and align, that's pretty much 99% of cases right there.

klabb3 3y ago
Nesting of flexboxes can be tricky though – especially when you have elements that fill “the rest of the width/height”. I’ve found that grids are a little easier to maintain a flat hierarchy and avoid complexity, but the downside is it also doesn’t modularize that well – you need to compose all the cells together, some of which probably should belong in a child “component”.
- dsego 3y ago
  Sub-grids will solve the grid in child component I think.
qingcharles 3y ago
I need the 1%. I want browser masonry support. Right now only Safari has it baked in properly, the rest I have to code around in a sub-optimal way: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la... I think Safari has it because the guy that wrote the spec now works at Apple. Not 100% sure of that, but seems that way. The code is in Chromium, just nobody ever hit the GO button.
- krsdcbl 3y ago
  tbh I'm glad, not sure about patching in an extra magic keyword with it's own set of new properties to achieve one specific layout pattern popularized by a jQuery lib in css grid module. It would have been much cleaner to add "auto-span" utility to grid-column and grid-row that allow to define "overflow snapping" if items are larger than template definitions, with an option for grid-auto-flow to affect packing logic This draft feels like it's solving a single use case by stacking presets over the grid api instead of exposing tools to achieve that use case
krsdcbl 3y ago
The 1% are difficult to learn, because you only need them in 1% of the cases ;)