3 ms·
I haven't stepped up my styling game in awhile. Would anyone like to explain to me how css grid is better than say flexbox, or how the two are different?
by Pigo 10y ago
I haven't stepped up my styling game in awhile. Would anyone like to explain to me how css grid is better than say flexbox, or how the two are different?
- mathw 10y agoCSS Grid complements Flexbox by providing two-dimensional grid-based layout capabilities. Flexbox can only lay things out along one axis, and although you can do a lot of things that look a bit grid-like with it (usually involving multiple flex containers), it doesn't actually think in grid terms to do it. So with CSS Grid and a few media queries it's pretty trivial to have a full-on, really robust grid layout on a desktop site and have it gracefully reflow itself into a column layout to render on a phone, with source element ordering being completely irrelevant. Or at least, it will be when the mobile and desktop browser support picture for it is good enough.
- sarcas 10y agoBoth Jen Simmons and Rachel Andrew have lots of good resources for understanding the new CSS layout techniques. This article of Rachel's is a year old, but will still give you a good understanding of the differences between the two: https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/ https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-... Jen's got lots of great links here: http://jensimmons.com/post/feb-27-2017/learn-css-grid http://jensimmons.com/post/feb-27-2017/learn-css-grid, including thoughts about how we're going to be able to use all these new layout techniques in ways both new and old. It's an exciting time to be designing on the web :->