CSS Grid: True Layout Finally Arrives

325 views

Published on

As presented at CSSConf, September 26, 2016, in Boston, MA

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
325
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CSS Grid: True Layout Finally Arrives

  1. 1. 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
  2. 2. https://www.w3.org/TR/css-2015/#css-levels “There is no CSS Level 4… CSS the language no longer has levels.”
  3. 3. http://news.softpedia.com/news/w3c-set-to-publish-html-5-1- already-started-work-on-html-5-2-508512.shtml
  4. 4. 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
  5. 5. Time spent trying to get the layout to work using Flexbox, before giving up and using floats
  6. 6. R E S P O N S I V E D E S I G N P A R T 1
  7. 7. •  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
  8. 8. •  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
  9. 9. . 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>
  10. 10. . 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%; }
  11. 11. . 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%; } }
  12. 12. 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; } }
  13. 13. . 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.
  14. 14. /* rearranging the columns */ [class*="col-"] { position: relative; } .col-push-1 { left: 26%; } .col-pull-3 { left: -74%; }
  15. 15. F L E X B O X N E X T U P
  16. 16. •  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
  17. 17. 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
  18. 18. 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
  19. 19. <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
  20. 20. .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
  21. 21. .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.
  22. 22. /* rearranging the columns */ .col-push-1 { order: 2; } .col-pull-3 { order: 1; }
  23. 23. C S S G R I D F I N A L L Y !
  24. 24. •  Built into CSS 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 G R I D ?
  25. 25. https://drafts.csswg.org/css-grid/
  26. 26. •  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
  27. 27. . 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>
  28. 28. . 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
  29. 29. . 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 - 41 2 3 4 5
  30. 30. .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
  31. 31. •  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
  32. 32. . 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>
  33. 33. . 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
  34. 34. C O D E E X A M P L E www.github.com/jen4web/cssgrid
  35. 35. •  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/ •  W3C Editor’s Draft, updated Sept 8: 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
  36. 36. •  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. •  PS – it’s in Bootstrap 4. Get used to it. •  Keep waiting for CSS 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
  37. 37. Q U E S T I O N S ? Jen Kramer Arlington, MA, USA Phone: 802-257-2657 jen@jenkramer.org www.jenkramer.org Twitter: @jen4web Facebook: facebook.com/webdesignjen

×