An Introduction to CSS Grid Layout

An introductory talk about the current W3C CSS Grid Layout Candidate Recommendation I held at the Frontend Meetup Rhein/Main in Frankfurt.

Here are the links from the presentation's sources:
https://www.w3.org/TR/css-grid-1/
http://gridbyexample.com/
https://css-tricks.com/snippets/css/complete-guide-grid/

Transcript

1. Introduction to
   CSS Grid Layout
   

   View Slide

2. Bastian Heist
   • Full-Stack Developer @ Sandstorm since 2015
   • Neos CMS supporter since 2015
   • Freelance Web Developer since 2009
   • SAP ERP Consultant @ Merck, 2008-2015
   @beheist
   

   View Slide

3. WHY
   another one?
   Flexbox
   Float
   Column
   Tables
   

   View Slide

4. two-dimensional grid-based layout system,
   optimized for user interface design
   CSS Grid Layout Module Level 1
   W3C Candidate Recommendation, 29 September 2016
   

   View Slide

5. Content
   1. Concepts & Terminology
   2. Defining a Grid
   3. Arranging Items on the Grid
   

   View Slide

6. Concepts & Terminology
   

   View Slide

7. Grid Container
   .container {
   display: grid;
   }
   

   
   

   
   
   
   

   View Slide

8. Grid Cell
   An abstract cell 

   defined in CSS.
   

   View Slide

9. Grid Item
   .container {
   display: grid;
   }
   

   
   

   
   
   
   ?
   ?
   ?
   

   View Slide

10. Grid Item != Grid Cell
    Items can be aligned 

    on the grid areas.
    

    View Slide

11. Grid Line
    

    View Slide

12. Grid Track
    An area between 2 grid lines. Rows or columns.
    

    View Slide

13. Grid Area
    An area confined by 4 grid lines.
    

    View Slide

14. Defining a Grid
    

    View Slide

15. #container {
    display: grid;
    // 3 columns
    grid-template-columns: 1rem 1rem 1rem;
    // 2 rows
    grid-template-rows: 1rem 1rem;

    }
    Defining a 3x2 Grid
    

    View Slide

16. #container {
    display: grid;
    grid-template-columns: [v0] 1rem [v1] 1rem [v2] 1rem [v3];
    grid-template-rows: [h0] 1rem [h1] 1rem [h2];
    }
    Lines Can Be Named
    [h0]
    [h1]
    [h2]
    [v0] [v1] [v2] [v3]
    

    View Slide

17. #container {
    display: grid;
    grid-template-columns: [v0] 1rem [v1] 1rem [v2] 1rem [v3];
    grid-template-rows: [h0] 1rem [h1] 1rem [h2];
    grid-template-areas: "top top top"
    "left . right";
    }
    Areas Can Be Named, Too
    top
    left right
    

    View Slide

18. #container {
    display: grid;
    grid: [r0-start] "top top top" 1rem [r0-end]
    [r1-start] "left . right" 1rem [r1-end];
    }
    Typing Sucks…
    top
    left right
    [r0-start]
    [r0-end] [r1-start]
    [r1-end]
    

    View Slide

19. Arranging Items on a Grid
    

    View Slide

20. 
    
    
    
    
    #container {…}
    #container header {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    }
    Arranging Items Between Lines
    
    index starts at 1
    

    View Slide

21. 
    
    
    
    
    […]
    #container section {
    grid-column-start: v0;
    grid-column-end: v1;
    grid-row-start: h1;
    grid-row-end: h2;
    }
    Remember the Named Lines?
    [h0]
    [h1]
    [h2]
    [v0] [v1] [v2] [v3]
    
    

    View Slide

22. 
    
    
    
    
    […]
    #container aside {
    grid-column: v2 / v3;
    grid-row: h1 / h2;
    }
    —— OR ——
    #container aside {
    grid-area: h1 / v2 / h3 / v3;
    }
    Shorthands!
    [h0]
    [h1]
    [h2]
    [v0] [v1] [v2] [v3]
    
    

    View Slide

23. […]
    #container header {
    grid-area: top;
    }
    #container section {
    grid-area: left;
    }
    #container aside {
    grid-area: right;
    }
    Align Items on Areas
    top
    left right
    

    View Slide

24. Demo Time!
    

    View Slide

25. But Wait, There’s More!
    • Grid Gaps
    • Justify & Align Grid Items and Content
    • Auto-generated Columns & Rows
    • Subgrids
    • Auto Layout / Auto Flow (!)
    

    View Slide

26. Awesome!
    Can I use it now?
    

    View Slide

27. http://caniuse.com/#search=grid
    

    View Slide

28. To try it now:
    chrome://flags/
    

    View Slide

29. One More Thing!
    

    View Slide

30. 13.3. - 19.3.
    make-rhein-main.de/webweek
    14.3. 19:00
    Neos Meetup Rhein/Main
    

    View Slide

31. Okay, One More Thing!
    

    View Slide

32. grid transforms
    ♥
    

    View Slide

33. View Slide

34. Thank you!
    @beheist
    

    View Slide

35. • W3C CSS Grid Layout Candidate Recommendation: https://www.w3.org/TR/css-grid-1/
    • Grid Examples: http://gridbyexample.com/
    • The Complete Guide To Grid: https://css-tricks.com/snippets/css/complete-guide-grid/
    Sources & Resources
    

    View Slide