Eran Schoellhorn
I'm a full stack web developer, JavaScript enthusiast, and all around nerdy kind of guy. These are my slide decks for various meetups and conferences. If you'd like to get in touch with me, hit me up on Twitter!
Grid-box-Flex-down
A Flexbox and Grid Revue
Eran Schoellhorn
@swellhorn
1. flexbox LAYOUT
2. GRID LAYOUT
3. ????
The Before times...
- Block layout for laying out documents
- Inline layout for laying out text
- Table layout for laying 2D tabular data
- Positioned layout for explicit positioning
- Floats ... for everything else
css3
Tab Atkins Jr.,
author of the Flexbox and Grid specs
"My goal in doing Flexbox and later Grid was to replace all the crazy float/table/inline-block/etc hacks that I’d had to master as a webdev. All that crap was (a) stupid, (b) hard to remember, and (c) limited in a million annoying ways, so I wanted to make a few well-done layout modules that solved the same problems in simple, easy-to-use, and complete ways."
Flexbox
griD
Flexbox
- One dimensional layout
- Provides simple means of controlling axis and flow of children
- Children can be discretely ordered and aligned
- Mostly easy
CSS grid
- TWO dimensional layout
- Define a grid on which children are oriented
- Children can be ordered and sized across the grid
- Greater control of layout
FLEXBOX Example
intermissió
GRID Example
| Flexbox | CSS Grid |
|---|---|
| 2015 | 2017...maybe? |
| 86.35%* | 37.01%* |
| No more prefixes! | Still prefix & Old spec in IE |
*Browser support as of April 4, 2017 via caniuse.com
Browser Support
QUESTIONS???????????????1
thanks!
eran schoellhorn @swellhorn
Grid Box Flex Down
By Eran Schoellhorn
Grid Box Flex Down
A fun comparative exploration of flexbox and grid layouts in CSS. With a disagreeable amount of Giphy embeds.
