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 Layout from the inside out (HTML5DevConf Autumn 2015)

597 views

Published on

By Manuel Rego.

Slides at http://people.igalia.com/mrego/talks/html5devconf-2015-css-grid-layout/#/

Layout on the web has been missing a proper solution for creating grid designs since the beginning. But this dark period is coming to an end with the new CSS Grid Layout spec. Grid layout is being implemented in every major web engine. The good news is that it will be hitting your browsers very soon.

During this talk we will not only review its syntax and main features, but also explain the internal details about what the browser has to do to render a CSS grid. After the talk, you'll be able to start playing with CSS Grid Layout, understanding the underlying steps involved, and provide feedback to the spec editors and browser implementors.

Published in: Technology
  • Be the first to comment

CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)

  1. 1. CSS GRID LAYOUT FROM THE INSIDE OUT MANUEL REGO CASASNOVAS ( )@regocas HTML5DevConf Autumn 2015 / 19-20 October 2015 (San Francisco)
  2. 2. ABOUT ME CSS Grid Layout implementor (Chromium/Blink & Safari/WebKit) Member of Igalia Web Platform Team
  3. 3. GRIDS EVERYWHERE
  4. 4. 1996
  5. 5. EVOLUTION
  6. 6. <TABLE> ὤ
  7. 7. FLOAT ὣ
  8. 8. DISPLAY: INLINE-BLOCK; ὣ
  9. 9. DISPLAY: TABLE; ὢ
  10. 10. CSS FRAMEWORKS ὠ
  11. 11. DISPLAY: FLEX; ὠ
  12. 12. DISPLAY: GRID; ὠ
  13. 13. GRID CONCEPTS Header MainAside Footer
  14. 14. GRID LINES Header MainAside Footer 1 2 3 1 2 3 4
  15. 15. GRID TRACKS
  16. 16. GRID TRACKS ROWS Header MainAside Footer
  17. 17. GRID TRACKS COLUMNS Header MainAside Footer
  18. 18. GRID CELLS Header MainAside Footer
  19. 19. GRID AREAS Header MainAside Footer
  20. 20. DISPLAY: GRID; New formatting context
  21. 21. TRACK SIZING grid-template-columns& grid-template-rows Create boxes from CSS!
  22. 22. TRACK SIZING EXAMPLE A B C D .grid { display: grid; grid-template-columns: ; grid-template-rows: ; } <div class="grid"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> <div class="d">D</div> </div>
  23. 23. PLACEMENT PROPERTIES grid-column& grid-row DOM order ≠ Visual order
  24. 24. PLACEMENT EXAMPLE A B C .grid { display: grid; grid: 200px 200px / 100px 100px; } .a { } <div class="grid"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> </div>
  25. 25. NAMED GRID LINES Use custom identifiers to reference lines A line can have several names
  26. 26. NAMED LINES EXAMPLE A B C .grid { display: grid; grid-template-columns: [left] 100px [middle center] 200px [right]; } <div class="grid"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> </div>
  27. 27. GRID AREAS grid-template-areas ### ###### ###### #### #### ### ######## ######## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ###### ## ## ## ## ## ######## ## ######### ## ## ## ## ######### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ###### ###### #### #### ## ## ## ## ##
  28. 28. GRID AREAS EXAMPLE A B C D .grid { display: grid; grid-auto-columns: 100px; grid-auto-rows: 75px; grid-template-areas: "head head" "nav main" "foot foot"; } .a { grid-area: head; } .b { grid-area: main; } .c { grid-area: nav; } .d { grid-area: foot; } <div class="grid"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> <div class="d">D</div> </div>
  29. 29. ALIGNMENT specCSS Box Alignment Horizontal & vertical centering!
  30. 30. ITEMS ALIGNMENT EXAMPLE A B C .grid { display: grid; grid: 200px 200px / 100px 100px; align-items: ; justify-items: ; } .b { align-self: ; justify-self: ; } <div class="grid"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> </div>
  31. 31. TRACKS ALIGNMENT EXAMPLE A B C .grid { display: grid; grid: 150px 150px / 100px 100px; align-content: ; justify-content: ; } <div class="grid"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> </div>
  32. 32. GRID GUTTERS grid-row-gap& grid-column-gap
  33. 33. GRID GUTTERS EXAMPLE A B C D E .grid { display: grid; grid: 100px 100px 100px / 100px 100px; grid-row-gap: ; grid-column-gap: ; } <div class="grid"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> <div class="d">D</div> <div class="e">E</div> </div>
  34. 34. AUTO-PLACEMENT grid-auto-flow
  35. 35. AUTO-PLACEMENT EXAMPLE Input Checkbox Submit form form { } label { } input { } <form> <label>Input</label> <input> <label>Checkbox</label> <input type="checkbox"> <button>Submit form</button> </form>
  36. 36. RESPONSIVE GRIDS Flexible track sizing Media Queries
  37. 37. RESPONSIVE GRID EXAMPLE .grid { display: grid; grid: 200px 1fr / 100px 1fr auto; grid-template-areas: "header header" "aside main " "aside footer"; } @media (max-width: 400px) { .grid { grid: 1fr / 100px 1fr 100px auto; grid-template-areas: "header" "main " "aside " "footer"; } }
  38. 38. RESPONSIVE GRID EXAMPLE Header MainAside Footer
  39. 39. & keywords for AUTO REPEAT auto-fill auto-fit repeat()
  40. 40. AUTO REPEAT EXAMPLE .grid { display: grid; grid-template-columns: repeat(auto-fill, 100px); } <div class="grid"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> </div> A B C D E
  41. 41. SUBGRIDS Nested Grid A B C D E S1 Sub2 S3 Sub4 Subgrid A B C D E Sub1 Sub2 Sub3 Sub4
  42. 42. SUBGRIDS EXAMPLE Input Checkbox Submit form ul { display: grid; } li { display: grid; } label { grid-column: 1; } <form><ul> <li><label>Input</label><input <li><label>Checkbox</label><input <li><button>Submit form</button </ul></form>
  43. 43. HOW DOES IT WORK?
  44. 44. EXAMPLE <div class="grid"> <div class="title">Title</div> <div class="nav">Nav</div> <div class="main">Lorem ipsum...</div> <div class="aside">Ad</div> <div class="aside">Adword</div> </div> .grid { display: grid; width: 800px; grid-template-columns: 200px 1fr auto; grid-template-rows: 100px auto; } .title { grid-row: 1; grid-column: 2; } .nav { grid-row: 2; grid-column: 1; } .main { grid-row: 2; grid-column: 2; } .aside { grid-column: 3; }
  45. 45. EMPTY GRID
  46. 46. PLACE ITEMS Title .title { grid-row: 1; grid-colum: 2; }
  47. 47. PLACE ITEMS Title Nav .nav { grid-row: 2; grid-colum: 1; }
  48. 48. PLACE ITEMS Title Nav Lorem ipsum... .main { grid-row: 2; grid-colum: 2; }
  49. 49. PLACE ITEMS Title Nav Lorem ipsum... Ad .aside { grid-colum: 3; }
  50. 50. PLACE ITEMS Title Nav Lorem ipsum... Ad Adword .aside { grid-colum: 3; }
  51. 51. PLACE ITEMS Title Nav Lorem ipsum... Ad Adword
  52. 52. FIXED COLUMN Title Nav Lorem ipsum... Ad Adword 200px
  53. 53. INTRINSIC COLUMN Title Nav Lorem ipsum... Ad 60px Adword 130px 200px auto
  54. 54. INTRINSIC COLUMN Title Nav Lorem ipsum... Ad Adword 200px 130px
  55. 55. FLEXIBLE COLUMN Title Nav Lorem ipsum... Ad Adword 200px 130px1fr
  56. 56. FLEXIBLE COLUMN Title Nav Lorem ipsum... Ad Adword 200px 130px470px
  57. 57. LAYOUT ITEMS Title Nav Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua. Ad Adword 200px 130px470px
  58. 58. FIXED ROW Title Nav Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua. Ad Adword 200px 130px470px 100px
  59. 59. INTRINSIC ROW Title Nav 60px Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua. 160px Ad Adword 60px 200px 130px470px 100px auto
  60. 60. INTRINSIC ROW Title Nav Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua. Ad Adword 200px 130px470px 100px 160px
  61. 61. STRETCH ITEMS Title Nav Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua. Ad Adword 200px 130px470px 100px 160px
  62. 62. FASTER GRIDS
  63. 63. FIXED VS INTRINSIC SIZING 200pxis faster than auto
  64. 64. INTRINSIC VS FLEXIBLE SIZING autois faster than 1fr
  65. 65. VERTICAL STRETCH Vertical stretchin auto-sized items is slower than other (e.g. start) Item
  66. 66. HORIZONTAL NON-STRETCH Avoid horizontal stretch(e.g. start) in auto-sized items is slower Item
  67. 67. STATUS
  68. 68. W3C SPECIFICATION CSS Grid Layout - https://drafts.csswg.org/css-grid/ Started by Microsoft in 2010 Last Working Draft 17 September 2015 W3C Test Suite
  69. 69. CAN I USE GRID? ὢ
  70. 70. BROWSERS ADOPTION ὠ Old implementation since IE 10 Prefixed: -ms More complete implementation ⚐Experimental Web Platform Features Enabled by default on WebKit Nightlies Prefixed: -webkit Implementation started early this year ⚐layout.css.grid.enabled Polyfill: https://github.com/FremyCompany/css-grid-polyfill
  71. 71. EXAMPLES by Igalia by Rachel Andrew http://igalia.github.io/css-grid-layout/ http://gridbyexample.com/
  72. 72. ACKNOWLEDGEMENTS and working together to build a better webIgalia Bloomberg
  73. 73. © euphro https://www.flickr.com/photos/euphro/8455969860/ THANK YOU! Twitter: Mail: Blog: @regocas rego@igalia.com http://blogs.igalia.com/mrego/

×