CSS Grid? Weird Flex, But OK... 💪
What we'll be talking about
- Layout types: Flexbox & CSS Grid
- When to use them
Common Layouts
- Floats
- Flexbox
- Tables
- Grid
Common Layouts
- Floats
- Flexbox
In many cases where floats are used, flexbox can now be used.
Proper use of the float property:
Common Layouts
- Tables
- Grid
In most cases where tables are used, CSS grid can now be used.
Proper use of table layouts:
- Email templates
- CAN be used for tabular data, but grid is still better
Flexbox VS Grid
- Flex: single rows or single columns
- Grid: many rows and many columns
And yes, we can use it:
Let's make these 1x1 blocks a bit more flexible
Let's talk about Flex
Now let's put all these blocks into a grid system.
Oops... I Grid It Again
A breakdown of the grid template:
Examples of Grid out in the wild CNET
Bottom line:
Flexbox and CSS Grid aren't meant to battle, but rather complement one another.