Hacker News Reader

Comment by sirius87 | Hacker News Reader

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)

View on HN

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.

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”.

Sub-grids will solve the grid in child component I think.

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_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.

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

The 1% are difficult to learn, because you only need them in 1% of the cases ;)

Reply on news.ycombinator.com