Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

I'll give an example of something you can't do with a one-dimensional layout system like Flexbox but can do with Grid Layouts: a staggered grid/one made of nonuniform cells: https://i.stack.imgur.com/QI2ol.png.

These come up quite a bit. Look at Pinterest, it is all staggered/made of nonuniform cells.



That’s interesting, I didn’t know about that. Didn’t Pinterest migrate its web front end to using react which uses flexbox for its layout system? If so, how did they do this?


React is just a View layer, you can use whatever layout system you want to use with it.

I haven't dug into Pinterest's code but I imagine it's most likely a mix of Flexbox and Multi-column layouts: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns....

Edit: See this blog post on how to combine them to achieve the staggered effect: https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8....


Cool, that’s interesting to know. I’m mainly used to using react in the context of react native so I wasn’t aware that mixing and matching like that was a thing.


Yeah React Native uses Yoga as it's layout engine which only supports Flex box. But for React DOM you get all of CSS, warts and all!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: