css4 grid: true layout finally arrives
TRANSCRIPT
![Page 1: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/1.jpg)
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
![Page 2: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/2.jpg)
![Page 3: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/3.jpg)
![Page 4: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/4.jpg)
![Page 5: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/5.jpg)
![Page 6: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/6.jpg)
![Page 7: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/7.jpg)
R E S P O N S I V E D E S I G NP A R T 1
![Page 8: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/8.jpg)
• 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
![Page 9: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/9.jpg)
![Page 10: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/10.jpg)
• 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
![Page 11: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/11.jpg)
F L E X B O XN E X T U P
![Page 12: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/12.jpg)
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
![Page 13: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/13.jpg)
A N Y D R A W B A C K S ?
Layouts are driven by content and how it loads.
![Page 14: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/14.jpg)
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
![Page 15: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/15.jpg)
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
![Page 16: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/16.jpg)
C S S 4 G R I DF I N A L L Y !
![Page 17: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/17.jpg)
• 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 ?
![Page 18: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/18.jpg)
• 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
![Page 19: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/19.jpg)
• 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
![Page 20: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/20.jpg)
![Page 21: CSS4 Grid: True Layout Finally Arrives](https://reader035.vdocuments.mx/reader035/viewer/2022062503/58ec8b5f1a28abe83b8b460d/html5/thumbnails/21.jpg)
Q U E S T I O N S ?
Jen Kramer
Arlington, MA
Phone: 802-257-2657
www.jenkramer.org
Twitter: @jen4web
Facebook: facebook.com/webdesignjen