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: Finally, True Layout Arrives version 5

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 CSS, 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.

Presented at Contao Conference: https://www.contao-konferenz.de/programm/vortrag/jen-kramer-cssgrid.html

  • Login to see the comments

  • Be the first to like this

CSS Grid: Finally, True Layout Arrives version 5

  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. https://www.w3.org/TR/html51/
  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 https://www.github.com/jen4web/cssgrid
  5. 5. Time spent trying to get the layout to work using Flexbox, before giving up and using floats
  6. 6. •  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
  7. 7. F L O A T S P A R T 1
  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 P A R T 2
  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 includes: 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 (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 ?
  25. 25. https://drafts.csswg.org/css-grid/
  26. 26. •  Full support: FF 52+, Chrome 57+, Safari 10.1+, Opera 44+ , iOS Safari 10.3+, Chrome for Android 59+, Firefox for Android 59+ •  Partial support: IE 10, IE 11, Edge 12+, IE Mobile 10+ (these based on an older spec) •  No support: Mostly mobile browsers (Opera Mini, Opera Mobile, Blackberry, Android, etc) •  http://caniuse.com/#search=grid B R O W S E R S U P P O R T
  27. 27. •  Old spec: https://github.com/codler/Grid-Layout-Polyfill •  New spec: https://github.com/FremyCompany/css-grid-polyfill/ •  @supports may help with all but IE browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/ @supports P O L Y F I L L S
  28. 28. . 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>
  29. 29. . 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
  30. 30. . 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
  31. 31. .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
  32. 32. •  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
  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 <div class=“wrapper”> <header></header> <article></article> <aside></aside> </div>
  34. 34. . 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
  35. 35. C O D E E X A M P L E www.github.com/jen4web/cssgrid
  36. 36. •  CSS Tricks: https://css-tricks.com/snippets/css/complete-guide-grid/ •  Grid by Example: http://gridbyexample.com/ •  Practical CSS Grid: Adding Grid to an Existing Design https://alistapart.com/article/practical-grid •  Basic concepts of grid layout https://developer.mozilla.org/en-US/docs/Web/CSS/ CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout •  CSS Grid Inspector (in Firefox): https://developer.mozilla.org/en-US/docs/Tools/ Page_Inspector/How_to/Examine_grid_layouts R E C O M M E N D E D R E S O U R C E S
  37. 37. •  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 now, if used with browser fallbacks. •  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
  38. 38. 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

×