$30 off During Our Annual Pro Sale. View Details »

An Introduction to CSS Grid Layout

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/

Bastian Heist

January 24, 2017
Tweet

More Decks by Bastian Heist

Other Decks in Programming

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