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.

Version 2: CSS4 Grid: True Layout Finally Arrives

277 views

Published on

As presented at Full Stack Fest, Barcelona, Spain, September 8, 2016. For years, front-end developers fumbled with hacking floats for layouts, often as part of a grid system. Media queries made these float-based grids more responsive to different screen dimensions, but unfortunately, the behaviors weren't always granular enough to work well with complex layouts. Now with the new Grid specification in CSS4, we can easily define behaviors for each cell in our layouts in two dimensions. When combined with media queries, we can specify where each cell will be placed under a variety of conditions, in horizontal and vertical space. Similarities and differences with Flexbox will also be identified and discussed.

Published in: Technology
  • Be the first to comment

Version 2: CSS4 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 www.github.com/jen4web/css4grid
  2. 2. R E S P O N S I V E D E S I G N P A R T 1
  3. 3. •  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
  4. 4. •  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
  5. 5. . 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>
  6. 6. . 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%; }
  7. 7. . 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%; } }
  8. 8. 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; } }
  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 There can be layout problems with floats. This can be resolved with JavaScript, with a column equalizer script.
  10. 10. /* rearranging the columns */ [class*="col-"] { position: relative; } .col-push-1 { left: 26%; } .col-pull-3 { left: -74%; }
  11. 11. F L E X B O X N E X T U P
  12. 12. •  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
  13. 13. 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 .flex-container { display: -ms-flexbox; display: -webkit-flex; display: flex; }
  14. 14. 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
  15. 15. <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
  16. 16. .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
  17. 17. .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.
  18. 18. /* rearranging the columns */ .col-push-1 { order: 2; } .col-pull-3 { order: 1; }
  19. 19. C S S 4 G R I D F I N A L L Y !
  20. 20. •  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 ?
  21. 21. https://drafts.csswg.org/css-grid/
  22. 22. •  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
  23. 23. . 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=“col-1”></div> <div class=“col-2”></div> <div class=“col-3”></div> <div class=“col-4”></div>
  24. 24. . 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
  25. 25. . 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
  26. 26. .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
  27. 27. •  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
  28. 28. . 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>
  29. 29. . 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/css4grid
  30. 30. C O D E E X A M P L E www.github.com/jen4web/css4grid
  31. 31. •  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
  32. 32. •  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
  33. 33. 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

×