Hacker News Reader

Comment by dsego | Hacker News Reader

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.

View on HN

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

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.

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

Reply on news.ycombinator.com