Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Grid: True Layout Finally Arrives

856 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×