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

GRID Example

*Browser support as of April 4, 2017 via caniuse.com

Browser Support

QUESTIONS???????????????1