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
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
3. WHY another one? Flexbox Float Column Tables
4. two-dimensional grid-based layout system, optimized for user interface design CSS Grid Layout Module Level 1 W3C Candidate Recommendation, 29 September 2016
5. Content 1. Concepts & Terminology 2. Defining a Grid 3. Arranging Items on the Grid
6. Concepts & Terminology
7. Grid Container .container { display: grid; } <div class="container">
 <div class="item"> </div>
 <div class="item"> </div> </div>
8. Grid Cell An abstract cell 
 defined in CSS.
9. Grid Item .container { display: grid; } <div class="container">
 <div class="item"> </div>
 <div class="item"> </div> </div> ? ? ?
10. Grid Item != Grid Cell Items can be aligned 
 on the grid areas.
11. Grid Line
12. Grid Track An area between 2 grid lines. Rows or columns.
13. Grid Area An area confined by 4 grid lines.
14. Defining a Grid
15. #container { display: grid; // 3 columns grid-template-columns: 1rem 1rem 1rem; // 2 rows grid-template-rows: 1rem 1rem;
 } Defining a 3x2 Grid
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]
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
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]
19. Arranging Items on a Grid
20. <main id="container"> <header></header> <section></section> <aside></aside> </main> #container {…} #container header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } Arranging Items Between Lines <header></header> index starts at 1
21. <main id="container"> <header></header> <section></section> <aside></aside> </main> […] #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] <section>
22. <main id="container"> <header></header> <section></section> <aside></aside> </main> […] #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] <aside>
23. […] #container header { grid-area: top; } #container section { grid-area: left; } #container aside { grid-area: right; } Align Items on Areas top left right
24. Demo Time!
25. But Wait, There’s More! • Grid Gaps • Justify & Align Grid Items and Content • Auto-generated Columns & Rows • Subgrids • Auto Layout / Auto Flow (!)
26. Awesome! Can I use it now?
27. http://caniuse.com/#search=grid
28. To try it now: chrome://flags/
29. One More Thing!
30. 13.3. - 19.3. make-rhein-main.de/webweek 14.3. 19:00 Neos Meetup Rhein/Main
31. Okay, One More Thing!
32. grid transforms ♥
34. Thank you! @beheist
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