Grid is for layout of items in two dimensions – rows AND columns. Rachel Andrew once made that very clear:įlexbox is essentially for laying out items in a single dimension – in a row OR a column. Here’s a neat idea.Īnd another huge one: Grid can position elements in 2 dimensions. Requiring less media query intervention with really powerful functionality like auto layout, minmax(), repeat(), and auto-fill.grid-gap is wonderful, as gutters are the main pain point of grid systems. Like X columns with Y gap between them homegrown framework stuff. It’s better for that even just considering layout performance reasons. Here’s some things Grid is specifically better at than Flexbox: Now there is a whole other syntax to learn? Sheesh. Especially if you’re just starting to get a grip on the weird, alien syntax of Flexbox. Even Edge supports it, albeit an older version of the spec, which you can get some support for by using Autoprefixer. It was released, completely unprefixed and ready-to-go, in Chrome, Opera, Firefox, and Safari. If you hadn’t heard the trumpets blaring, March 2017 was the banner month for Grid. A flex item can be a grid container.Įven though Grid is pretty new, we have lots of articles about it, including a getting started article, an article about a basic layout done multiple ways, and a complete guide. They can work together: a grid item can be a flexbox container.That’s why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox. Grid is much newer than Flexbox and has a bit less browser support.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |