CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)
3 likes876 views
The document discusses the CSS Grid Layout, exploring its evolution, implementation details, and features such as grid areas, track sizing, and alignment properties. It provides examples and code snippets to illustrate the functionality and responsive capabilities of CSS Grid. Additionally, the document addresses browser adoption and includes acknowledgment for contributions in the development of CSS Grid.
![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>](https://image.slidesharecdn.com/cssgridlayoutfromtheinsideout-151021115203-lva1-app6891/85/CSS-Grid-Layout-from-the-inside-out-HTML5DevConf-Autumn-2015-29-320.jpg)
CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)
- 1. CSS GRID LAYOUT FROM THE INSIDE OUT MANUEL REGO CASASNOVAS ( )@regocas HTML5DevConf Autumn 2015 / 19-20 October 2015 (San Francisco)
- 2. ABOUT ME CSS Grid Layout implementor (Chromium/Blink & Safari/WebKit) Member of Igalia Web Platform Team
- 5. 1996
- 6. EVOLUTION
- 7. <TABLE> ὤ
- 8. FLOAT ὣ
- 11. CSS FRAMEWORKS ὠ
- 12. DISPLAY: FLEX; ὠ
- 13. DISPLAY: GRID; ὠ
- 16. GRID LINES Header MainAside Footer 1 2 3 1 2 3 4
- 17. GRID TRACKS
- 23. DISPLAY: GRID; New formatting context
- 24. TRACK SIZING grid-template-columns& grid-template-rows Create boxes from CSS!
- 25. 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>
- 26. PLACEMENT PROPERTIES grid-column& grid-row DOM order ≠ Visual order
- 27. 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>
- 28. NAMED GRID LINES Use custom identifiers to reference lines A line can have several names
- 29. 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>
- 30. GRID AREAS grid-template-areas ### ###### ###### #### #### ### ######## ######## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ###### ## ## ## ## ## ######## ## ######### ## ## ## ## ######### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ###### ###### #### #### ## ## ## ## ##
- 31. 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>
- 32. ALIGNMENT specCSS Box Alignment Horizontal & vertical centering!
- 33. 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>
- 34. 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>
- 36. 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>
- 38. 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>
- 39. RESPONSIVE GRIDS Flexible track sizing Media Queries
- 40. 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"; } }
- 43. & keywords for AUTO REPEAT auto-fill auto-fit repeat()
- 44. 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
- 45. SUBGRIDS Nested Grid A B C D E S1 Sub2 S3 Sub4 Subgrid A B C D E Sub1 Sub2 Sub3 Sub4
- 46. 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>
- 47. HOW DOES IT WORK?
- 48. 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; }
- 49. EMPTY GRID
- 50. PLACE ITEMS Title .title { grid-row: 1; grid-colum: 2; }
- 51. PLACE ITEMS Title Nav .nav { grid-row: 2; grid-colum: 1; }
- 52. PLACE ITEMS Title Nav Lorem ipsum... .main { grid-row: 2; grid-colum: 2; }
- 53. PLACE ITEMS Title Nav Lorem ipsum... Ad .aside { grid-colum: 3; }
- 54. PLACE ITEMS Title Nav Lorem ipsum... Ad Adword .aside { grid-colum: 3; }
- 55. PLACE ITEMS Title Nav Lorem ipsum... Ad Adword
- 56. FIXED COLUMN Title Nav Lorem ipsum... Ad Adword 200px
- 57. INTRINSIC COLUMN Title Nav Lorem ipsum... Ad 60px Adword 130px 200px auto
- 58. INTRINSIC COLUMN Title Nav Lorem ipsum... Ad Adword 200px 130px
- 59. FLEXIBLE COLUMN Title Nav Lorem ipsum... Ad Adword 200px 130px1fr
- 60. FLEXIBLE COLUMN Title Nav Lorem ipsum... Ad Adword 200px 130px470px
- 61. 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
- 62. 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
- 63. 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
- 64. 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
- 65. 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
- 66. FASTER GRIDS
- 67. FIXED VS INTRINSIC SIZING 200pxis faster than auto
- 68. INTRINSIC VS FLEXIBLE SIZING autois faster than 1fr
- 69. VERTICAL STRETCH Vertical stretchin auto-sized items is slower than other (e.g. start) Item
- 70. HORIZONTAL NON-STRETCH Avoid horizontal stretch(e.g. start) in auto-sized items is slower Item
- 71. STATUS
- 72. 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
- 73. CAN I USE GRID? ὢ
- 74. 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
- 75. EXAMPLES by Igalia by Rachel Andrew http://igalia.github.io/css-grid-layout/ http://gridbyexample.com/
- 76. ACKNOWLEDGEMENTS and working together to build a better webIgalia Bloomberg
- 77. © euphro https://www.flickr.com/photos/euphro/8455969860/ THANK YOU! Twitter: Mail: Blog: @regocas [email protected] http://blogs.igalia.com/mrego/