CSS Grid Layout is Just Around the Corner (CSSConf US 2015)
1 like519 views
The document presents a comprehensive overview of CSS Grid Layout, including its foundational concepts, implementation, and various properties such as grid tracks, areas, and auto-placement. It discusses examples of grid usage, alignment, responsive design, and performance considerations, along with the status of browser adoption and links to resources. The content is aimed at web developers looking to utilize CSS Grid for layout design in web applications.
CSS Grid Layout is Just Around the Corner (CSSConf US 2015)
- 1. CSS GRID LAYOUT IS JUST AROUND THE CORNER MANUEL REGO CASASNOVAS ( )@regocas CSSConf US 2015 / 18-19 June 2015 (New York)
- 2. ABOUT ME CSS Grid Layout implementor (Chromium/Blink & Safari/WebKit) Member of Igalia Web Platform Team
- 5. 1996
- 6. EVOLUTION Tables Floats Inlines CSS Frameworks CSS Flexible Box CSS Grid Layout
- 9. GRID LINES Header MainAside Footer 1 2 3 1 2 3 4
- 10. GRID TRACKS
- 16. DISPLAY: GRID; New formatting context
- 17. TRACK SIZING grid-template-columns& grid-template-rows Create boxes from CSS!
- 18. TRACK SIZING EXAMPLE A B C D .grid { display: grid; grid-template-columns: ; grid-template-rows: ; } < d i v c l a s s = " g r i d " > < d i v c l a s s = " a " > A < / d i v > < d i v c l a s s = " b " > B < / d i v > < d i v c l a s s = " c " > C < / d i v > < d i v c l a s s = " d " > D < / d i v > < / d i v >
- 19. PLACEMENT PROPERTIES grid-column& grid-row DOM order ≠ Visual order
- 20. PLACEMENT EXAMPLE A B C .grid { display: grid; grid: 200px 200px / 100px 100px; } .a { } < d i v c l a s s = " g r i d " > < d i v c l a s s = " a " > A < / d i v > < d i v c l a s s = " b " > B < / d i v > < d i v c l a s s = " c " > C < / d i v > < / d i v >
- 21. GRID AREAS grid-template-areas ### ###### ###### #### #### ### ######## ######## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ###### ## ## ## ## ## ######## ## ######### ## ## ## ## ######### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ###### ###### #### #### ## ## ## ## ##
- 22. 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; } < d i v c l a s s = " g r i d " > < d i v c l a s s = " a " > A < / d i v > < d i v c l a s s = " b " > B < / d i v > < d i v c l a s s = " c " > C < / d i v > < d i v c l a s s = " d " > D < / d i v > < / d i v >
- 24. AUTO-PLACEMENT EXAMPLE Input Checkbox Submit form form { } label { } input { } < f o r m > < l a b e l > I n p u t < / l a b e l > < i n p u t > < l a b e l > C h e c k b o x < / l a b e l > < i n p u t t y p e = " c h e c k b o x " > < b u t t o n > S u b m i t f o r m < / b u t t o n > < / f o r m >
- 25. ALIGNMENT specCSS Box Alignment Horizontal & vertical centering!
- 26. ALIGNMENT EXAMPLE A B C D .grid { display: grid; grid: 200px 200px / 100px 100px; align-items: ; justify-items: ; } .b, .c { width: 100px; } < d i v c l a s s = " g r i d " > < d i v c l a s s = " a " > A < / d i v > < d i v c l a s s = " b " > B < / d i v > < d i v c l a s s = " c " > C < / d i v > < d i v c l a s s = " d " > D < / d i v > < / d i v >
- 27. RESPONSIVE GRIDS Flexible track sizing Media Queries
- 28. RESPONSIVE GRID EXAMPLE . g r i d { d i s p l a y : g r i d ; g r i d : 2 0 0 p x 1 f r / 1 0 0 p x 1 f r a u t o ; g r i d - t e m p l a t e - a r e a s : " h e a d e r h e a d e r " " a s i d e m a i n " " a s i d e f o o t e r " ; } @ m e d i a ( m a x - w i d t h : 4 0 0 p x ) { . g r i d { g r i d : 1 f r / 1 0 0 p x 1 f r 1 0 0 p x a u t o ; g r i d - t e m p l a t e - a r e a s : " h e a d e r " " m a i n " " a s i d e " " f o o t e r " ; } }
- 31. ROW/COLUMN GAPS A B C .grid { display: grid; grid: 100px 25px 100px 25px 100px / 100px; } .a { grid-column: 1; } < d i v c l a s s = " g r i d " > < d i v c l a s s = " a " > A < / d i v > < d i v c l a s s = " b " > B < / d i v > < d i v c l a s s = " c " > C < / d i v > < / d i v > Proposal: reuse column-gap& introduce row-gap
- 32. ROW/COLUMN GAPS Fake with alignment A B C .grid { display: grid; grid: 100px 100px 100px / 100px; justify-content: space-between; } < d i v c l a s s = " g r i d " > < d i v c l a s s = " a " > A < / d i v > < d i v c l a s s = " b " > B < / d i v > < d i v c l a s s = " c " > C < / d i v > < / d i v >
- 33. SUBGRIDS Nested Grid A B C D E S1 Sub2 S 2 Sub 4 A B C D E S1 Sub2 S 2 Sub 4 Subgrid
- 34. SUBGRIDS EXAMPLE Input Checkbox Submit form ul { display: grid; } li { display: grid; } label { grid-column: 1; } < f o r m > < u l > < l i > < l a b e l > I n p u t < / l a b e l > < i n p u t < l i > < l a b e l > C h e c k b o x < / l a b e l > < i n p u t < l i > < b u t t o n > S u b m i t f o r m < / b u t t o n < / u l > < / f o r m >
- 35. HOW DOES IT WORK?
- 36. EXAMPLE < d i v c l a s s = " g r i d " > < d i v c l a s s = " t i t l e " > T i t l e < / d i v > < d i v c l a s s = " n a v " > N a v < / d i v > < d i v c l a s s = " m a i n " > L o r e m i p s u m . . . < / d i v > < d i v c l a s s = " a s i d e " > A d < / d i v > < d i v c l a s s = " a s i d e " > A d w o r d < / d i v > < / d i v > . g r i d { d i s p l a y : g r i d ; w i d t h : 4 0 0 p x ; g r i d - t e m p l a t e - c o l u m n s : 1 0 0 p x 1 f r a u t o ; g r i d - t e m p l a t e - r o w s : 5 0 p x a u t o ; } . t i t l e { g r i d - r o w : 1 ; g r i d - c o l u m n : 2 ; } . n a v { g r i d - r o w : 2 ; g r i d - c o l u m n : 1 ; } . m a i n { g r i d - r o w : 2 ; g r i d - c o l u m n : 2 ; } . a s i d e { g r i d - c o l u m n : 3 ; }
- 37. EMPTY GRID
- 38. PLACE ITEMS Title .title { grid-row: 1; grid-column: 2; }
- 39. PLACE ITEMS Title Nav .nav { grid-row: 2; grid-column: 1; }
- 40. PLACE ITEMS Lorem ipsum... Title Nav .main { grid-row: 2; grid-column: 2; }
- 41. PLACE ITEMS Lorem ipsum... Title Nav Ad .aside { grid-column: 3; }
- 42. PLACE ITEMS Lorem ipsum... Title Nav Ad Adword .aside { grid-column: 3; }
- 45. INTRINSIC COLUMN Lorem ipsum... Title Nav 100px auto Ad Adword 30px 70px
- 46. INTRINSIC COLUMN Lorem ipsum... Title Nav 100px 70px Ad Adword
- 47. FLEXIBLE COLUMN Lorem ipsum... Title Nav 100px 1fr 70px Ad Adword
- 48. FLEXIBLE COLUMN Lorem ipsum... Title Nav 100px 230px 70px Ad Adword
- 49. LAYOUT ITEMS 100px 230px 70px Ad Adword Title Nav Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- 50. FIXED ROW Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 100px 230px 70px Ad Adword Title Nav 50px
- 51. INTRINSIC ROW Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 100px 230px 70px Ad Adword Title Nav 50px auto 30px 120px 30px
- 52. INTRINSIC ROW Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 100px 230px 70px Ad Adword Title Nav 50px 120px
- 53. STRETCH ITEMS Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 100px 230px 70px Ad Adword Title Nav 50px 120px
- 54. FASTER GRIDS
- 55. FIXED VS INTRINSIC SIZING 100pxis faster than auto
- 56. INTRINSIC VS FLEXIBLE SIZING autois faster than 1fr
- 57. STRETCH IN AUTO SIZED ITEMS stretchis slower than other (e.g. start)
- 58. STATUS
- 59. W3C SPECIFICATION CSS Grid Layout - http://dev.w3.org/csswg/css-grid/ Started by Microsoft in 2010 Last Working Draft 17 March 2015 W3C Test Suite
- 60. CAN I USE GRID? ὢ
- 61. BROWSERS ADOPTION ὠ Old implementation since version 10 Prefixed: -ms More complete implementation ⚐Experimental Web Platform Features Enabled by default on WebKit Nightlies Prefixed: -webkit Implementation started on 2015 ⚐layout.css.grid.enabled Polyfill: https://github.com/FremyCompany/css-grid-polyfill
- 62. EXAMPLES by Igalia by Rachel Andrew http://igalia.github.io/css-grid-layout/ http://gridbyexample.com/
- 63. ACKNOWLEDGEMENTS and working together to build a better web Igalia Bloomberg