CSS Grid vs Flexbox
Quick History
display: table;
display: block;
display: inline;
float: value;
display: flex;
display: grid;Grid LayoutÂ
Divides space into columns & rows. Like table layouts, but better!
display: grid;Flexbox layout
distributes space along a single column or row. Like float layouts, but better!
display: flex;Flexbox API
Learn it using: https://flexboxfroggy.com/
Grid API
Learn it using: https://cssgridgarden.com/
When to use which
1 direction vs 2 directions
When to use which
intentional overlap
What about browser support?
https://caniuse.com/#search=flex
https://caniuse.com/#search=grid
best practice is to guard it with a feature query
Lets use it to refactor a site
Powerful auto-fit auto-fill feature of the grid
Resources
- http://straw-dogs.webflow.io/
- https://gridbyexample.com
- https://flexboxfroggy.com/
- https://cssgridgarden.com/
- https://caniuse.com/#search=flex
- https://caniuse.com/#search=grid
- https://www.youtube.com/watch?v=RSIclWvNTdQ
- https://spaceninja.com/2015/08/24/what-is-flexbox/
- https://jonibologna.com/blog/flexbox-cheatsheet