css grid: finally, true layout arrives
TRANSCRIPT
![Page 1: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/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
![Page 2: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/2.jpg)
![Page 3: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/3.jpg)
< R A N T >
![Page 4: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/4.jpg)
![Page 5: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/5.jpg)
![Page 6: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/6.jpg)
L B N T L I K E B E S T N E X T T I M E
![Page 7: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/7.jpg)
< / R A N T >
![Page 8: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/8.jpg)
![Page 9: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/9.jpg)
https://www.w3.org/TR/css-2015/#css-levels
“There is no CSS Level 4… CSS the language no longer has levels.”
![Page 10: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/10.jpg)
https://www.w3.org/TR/html51/
![Page 11: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/11.jpg)
![Page 12: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/12.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
X
https://www.github.com/jen4web/cssgrid
![Page 13: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/13.jpg)
![Page 14: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/14.jpg)
![Page 15: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/15.jpg)
Time spent trying to get the layout to work using
Flexbox, before giving up and using floats
![Page 16: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/16.jpg)
R E S P O N S I V E D E S I G NP A R T 1
![Page 17: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/17.jpg)
• Defined by three characteristics
• Flexible grid-based layout
• Media queries (CSS3)
• Images that resize
• www.alistapart.com/articles/responsive-web-design/
R E S P O N S I V E D E S I G N
![Page 18: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/18.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 19: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/19.jpg)
. R O W
C E L L / . C O L - 1
C E L L / . C O L - 1
C E L L / . C O L - 1
C E L L / . C O L - 1
<div class=“row”> <div class=“col-1”></div> <div class=“col-1”></div> <div class=“col-1”></div> <div class=“col-1”></div></div>
![Page 20: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/20.jpg)
. R O W
C E L L / . C O L - 1
C E L L / . C O L - 1
C E L L / . C O L - 1
C E L L / . C O L - 1
.row::after { content: ""; display: table; clear: both;}
.col-1 { float: left;
margin-left: 4%; width: 20%;}
![Page 21: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/21.jpg)
. R O W
C E L L / . C O L - 1
C E L L / . C O L - 1
C E L L / . C O L - 1
C E L L / . C O L - 1
@media only screen and (min-width: 480px) and (max-width: 767px) { .col-1 { width: 44%; }}
![Page 22: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/22.jpg)
R O W
C E L L / . C O L - 1
C E L L / . C O L - 1
C E L L / . C O L - 1
C E L L / . C O L - 1
@media only screen and (max-width: 479px) {
.col-1 { width: 98%; margin: 1%; float: none; }}
![Page 23: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/23.jpg)
. R O W
C E L L / . C O L - 1
1
C E L L / . C O L - 1
2
C E L L / . C O L - 1
3 C E L L /
. C O L - 1 4
There can be layout problems with floats.
This can be resolved with JavaScript, with a column equalizer script.
![Page 24: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/24.jpg)
/* rearranging the columns */[class*="col-"] {
position: relative;}.col-push-1 {
left: 26%;}.col-pull-3 {
left: -74%;}
![Page 25: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/25.jpg)
F L E X B O XN E X T U P
![Page 26: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/26.jpg)
• The first layout elements – but not designed to lay out whole web pages
• Features flex-containers (row) and flex-items (cells). Both are required to work.
• Excels at vertical centering and equal heights
• Very easy to reorder boxes
• Major disadvantages:
• Wasn’t designed to be locked down for layouts! Works in 1 dimension only.
• Browser support and syntax is challenging.
F L E X B O X
![Page 27: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/27.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 28: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/28.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 (including Opera!)
• http://caniuse.com/#feat=flexbox
![Page 29: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/29.jpg)
<div class=“row”> <div class=“col-1”></div> <div class=“col-1”></div> <div class=“col-1”></div> <div class=“col-1”></div></div>
. R O W / C O N T A I N E R
I T E M / . C O L - 1
I T E M / . C O L - 1
I T E M / . C O L - 1
I T E M / . C O L - 1
![Page 30: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/30.jpg)
.row {display: flex;flex: 0 1 auto;flex-flow: row wrap;justify-content: center;margin: 1%;
}
Change flex-flow to other values to change direction of rows – row reverse, column reverse, no wrap
![Page 31: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/31.jpg)
.col-1 { flex: 0 0 24%; /* desktop */} flex: 0 0 48%; /* tablet */} flex: 0 0 98%; /* phone */}
To change widths on .col-1, change the flex-basis property. This is more flexible than width.
![Page 32: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/32.jpg)
/* rearranging the columns */
.col-push-1 {order: 2;
}.col-pull-3 {order: 1;
}
![Page 33: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/33.jpg)
C S S G R I DF I N A L L Y !
![Page 34: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/34.jpg)
• Built into CSS specification (now a recommendation).
• 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 G R I D ?
![Page 35: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/35.jpg)
https://drafts.csswg.org/css-grid/
![Page 36: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/36.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
• BUT WAIT: Should be in Chrome/Firefox in March 2017! http://meyerweb.com/eric/thoughts/2016/12/05/css-grid/
I S S U E S , W E ’ V E H A D A F E W
![Page 37: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/37.jpg)
. W R A P P E R
C E L L / . C O L - 1
C E L L / . C O L - 2
C E L L / . C O L - 3
C E L L / . C O L - 4
<div class=“wrapper”> <div class=“col-1”></div> <div class=“col-2”></div> <div class=“col-3”></div> <div class=“col-4”></div></div>
![Page 38: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/38.jpg)
. W R A P P E R
.wrapper {display: grid;grid-gap: 10px;
}
C E L L / . C O L - 1
C E L L / . C O L - 2
C E L L / . C O L - 3
C E L L / . C O L - 4
![Page 39: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/39.jpg)
. W R A P P E R
.col-1 {grid-column: 1 / 2;
}.col-2 {
grid-column: 2 / 3;}.col-3 {
grid-column: 3 / 4;}
C E L L / . C O L - 1
C E L L / . C O L - 2
C E L L / . C O L - 3
C E L L / . C O L - 4 1 2 3 4 5
![Page 40: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/40.jpg)
.col-1 {grid-column: 1 / 2;
grid-row: 1 / 3;}.col-2 {
grid-column: 2 / 3; grid-row: 1 / 2;}.col-3 {
grid-column: 2 / 3; grid-row: 2 / 3;}
. W R A P P E R
C E L L / . C O L - 1
C E L L / . C O L - 2
C E L L / . C O L - 3
![Page 41: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/41.jpg)
• Named grid template areas (header, footer, etc): http://gridbyexample.com/examples/#example11
A L T E R N A T E S Y N T A X
![Page 42: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/42.jpg)
. W R A P P E R
A S I D E
H E A D E R
A R T I C L E
R E O R D E R I N G
<div class=“wrapper”> <header></header> <article></article> <aside></aside></div>
![Page 43: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/43.jpg)
. W R A P P E R
A S I D E
H E A D E R
A R T I C L E
R E O R D E R I N G
Show code in GitHub!
reordering.html
reordering.css
https://github.com/jen4web/cssgrid
![Page 44: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/44.jpg)
C O D E E X A M P L Ewww.github.com/jen4web/cssgrid
![Page 45: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/45.jpg)
• When Grid is available in the first browsers, you can use it.
• You will need alternative syntax for layouts.
• @supports may help with all but IE browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
M A R C H 2 0 1 7
![Page 46: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/46.jpg)
• CSS Tricks: https://css-tricks.com/snippets/css/complete-guide-grid/
• Grid by Example: http://gridbyexample.com/
• W3C Spec: https://www.w3.org/TR/css-grid-1/ (Candidate recommendation, Sept 29)
• W3C Editor’s Draft, updated December 14: https://drafts.csswg.org/css-grid/
R E C O M M E N D E D R E S O U R C E S
![Page 47: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/47.jpg)
• Need browser support? Can’t go wrong with floats.
• It’s time to learn Flexbox if you haven’t already. PS – it’s in Bootstrap 4. Get used to it.
• You can start using CSS Grid as soon as it’s available in Chrome and Firefox when combined with @supports.
• Realistically, plan for another year before you use Grid on most websites.
C U R R E N T R E C O M M E N D A T I O N S
![Page 48: CSS Grid: Finally, True Layout Arrives](https://reader036.vdocuments.net/reader036/viewer/2022062311/58ec8b5f1a28abe83b8b4609/html5/thumbnails/48.jpg)
Q U E S T I O N S ?
Jen Kramer
Arlington, MA, USA
Phone: 802-257-2657
www.jenkramer.org
Twitter: @jen4web
Facebook: facebook.com/webdesignjen