C S S 4 G R I D : T R U E L A Y O U T F I N A L L Y A R R I V E S

J E N K R A M E R H A R V A R D U N I V E R S I T Y E X T E N S I O N S C H O O L

www.github.com/jen4web/css4grid

R E S P O N S I V E D E S I G NP A R T 1

•  Defined by three characteristics

•  Flexible grid-based layout

•  Media queries (CSS3)

•  Images that resize

•  www.alistapart.com/articles/responsive-web-design/

•  I’ll focus on grids and media queries as others are handling images.

R E S P O N S I V E D E S I G N

•  A hack from the start, right after table-based layout!

•  Features rows and cells.

•  Rows clear the floats on the cells.

•  Source ordering determines display, though some (minor) rearrangement is possible.

•  Major disadvantage: equal column heights

F L O A T S

F L E X B O XN E X T U P

W H Y I S F L E X B O X A W E S O M E ?

•  Excels at vertical centering and equal heights

•  Flex property changes the container’s width/height to fill available space

•  Expand to fill empty space

•  Shrink to prevent overflow

A N Y D R A W B A C K S ?

Layouts are driven by content and how it loads.

T H R E E V E R S I O N S O F F L E X B O X

•  2009: display: box;

•  2011: display: flexbox; (“tweener” syntax)

•  2016: display: flex;

•  Prefixing may still be required depending on browser support desired

C U R R E N T S U P P O R T

•  Internet Explorer

•  <= IE 9: not supported

•  IE 10 supports “tweener” syntax (ms prefix)

•  IE 11, Edge: Full support (though buggy in IE 11)

•  Safari 7.1/8, iOS Safari 7/8 require webkit prefix

•  Others support current syntax

•  http://caniuse.com/#feat=flexbox

C S S 4 G R I DF I N A L L Y !

•  Built into CSS4 specification (in development).

•  No “row” markup required.

•  Grid is designed to work in 2 dimensions.

•  Use Flexbox for UI elements, but use Grid for major layout.

W H Y C S S 4 G R I D ?

•  Almost no browser support without flags: http://igalia.github.io/css-grid-layout/enable.html

•  Spec isn’t fully implemented in some browsers, and/or there are bugs

I S S U E S , W E ’ V E H A D A F E W

•  Need browser support? Can’t go wrong with floats.

•  If you are OK with a few prefixes and learning something new, Flexbox may be a reasonable interim step.

•  Keep waiting for CSS4 Grid! Coming to a browser near you Real Soon!

C U R R E N T R E C O M M E N D A T I O N S

Q U E S T I O N S ?

Jen Kramer

Arlington, MA

Phone: 802-257-2657

jen@jenkramer.org

www.jenkramer.org

Twitter: @jen4web

Facebook: facebook.com/webdesignjen