Let’s Learn CSS Grid - EE Conf

CSS Grid Layout is gaining more browser support everyday! But what is it? How does it work? Why should you use it? And what are some practical ways you can incorporate it into your project? I'll show you how CSS Grid solves layout problems we've had for years, and how it's a great compliment to the other layout tools we have.

Transcript

1. LET’S LEARN CSSGRID
2. Hi there! I’m Tim Smith
6. Agenda
7. Agenda 1. Problems we’ve had with layout
8. Agenda 1. Problems we’ve had with layout 2. What is CSS Grid and how does it solve these problems?
9. Agenda 1. Problems we’ve had with layout 2. What is CSS Grid and how does it solve these problems? 3. Why do I need to learn this?
10. Agenda 1. Problems we’ve had with layout 2. What is CSS Grid and how does it solve these problems? 3. Why do I need to learn this? 4. Resources
11. A History of Layout Issues
12. Floats
13. Floats Suck
14. CSS Frameworks
15. CSS Frameworks <div class="small-12 medium-6 large-8"></div>
16. Separation of Concerns
17. Floats Aren’t Bad
18. They’re Not for Complex Layouts
19. Why?
21. Flexbox
22. Flexbox is Flexible
23. Main Column and Sidebar Layout <aside>Aside</aside> <main>Main Content</main>
24. Main Column and Sidebar Layout <aside>Aside</aside> <main>Main Content</main> And our CSS.
25. Main Column and Sidebar Layout <aside>Aside</aside> <main>Main Content</main> And our CSS. body { display: flex; } aside { background-color: #eee; flex: 1 1 30%; } main { background-color: #ddd; flex: 1 1 70%; }
26. The two columns are completely flexible.
27. Flexbox Card Layout <ul class="boxes"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
28. Flexbox Card Layout <ul class="boxes"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> And now our CSS.
29. Flexbox Card Layout <ul class="boxes"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> And now our CSS. .boxes { display: flex; flex-wrap: wrap; } .boxes li { flex: 1 1 30%; background: #eee; margin: 0 .5rem 1rem; }
30. This is not what I want!
31. Math
32. You Need Stuff Like This li:nth-child(2n+2) { margin-right: 0; }
33. You Need Stuff Like This li:nth-child(2n+2) { margin-right: 0; } Oh wait! What about bigger screens?
34. You Need Stuff Like This li:nth-child(2n+2) { margin-right: 0; } Oh wait! What about bigger screens? @media screen and (min-width: 40em) { li:nth-child(2n+2) { margin-right: 1.5rem; } li:nth-child(3n+3) { margin-right: 0; } }
36. Flexbox Is Awesome
37. Vertical Align!
38. We’re Using Flexbox Wrong
39. CSS Grid to the Rescue
40. CSS Grid is Not a Float Killer
41. CSS Grid is Not a Flexbox Killer
42. You Don’t Need a Framework
43. CSS Grid Is the Framework
44. CSS Grid is Friendly
45. Great Use of Flexbox
46. Great Use of Floats
47. CSS Grid What Is It Good For?
48. “My super simple theory at the moment — if you are putting widths on flex items, you are doing it wrong. Use Grid. (Let’s see if that holds.) —Jen Simmons
49. CSS Grid Basics
50. display: grid;
51. grid-template-columns
52. fr
53. grid-gap
54. Let’s See It in Action
55. Holy Grail Layout
56. Set Up <header>Header</header> <aside>Aside</aside> <main>Main Content</main> <footer>Footer</footer>
57. Set Up <header>Header</header> <aside>Aside</aside> <main>Main Content</main> <footer>Footer</footer> body { display: grid; grid-template-columns: 2fr 3fr; grid-gap: 2rem; }
58. Let’s Place Our Items header { grid-column: 1 / span 2; } aside { grid-column-end: span 1; grid-row: 2; } main { grid-column: 2 / span 1; grid-row: 2; } footer { grid-column: 1 / span 2; grid-row: 3; }
59. Grid Lines
60. Rewrite with Grid Areas body { display: grid; grid-template-columns: 2fr 3fr; grid-gap: 2rem; grid-template-areas: "header header" "aside main" "footer footer"; } header { grid-area: header; } aside { grid-area: aside; } main { grid-area: main; } footer { grid-area: footer; }
62. What If? body { grid-template-areas: ". header" "aside main" ". footer"; }
65. Easily Responsive body { display: grid; grid-gap: 2rem; grid-template-areas: "header" "main" "aside" "footer"; } @media and screen (min-width: 40em) { body { grid-template-columns: 2fr 3fr; grid-template-areas: "header header" "aside main" "footer footer"; } }
67. Card Layout
68. Setup <ul class="boxes"> <li>Box 1</li> <li>Box 2</li> <li>Box 3</li> <li>Box 4</li> <li>Box 5</li> <li>Box 6</li> </ul>
69. Setup <ul class="boxes"> <li>Box 1</li> <li>Box 2</li> <li>Box 3</li> <li>Box 4</li> <li>Box 5</li> <li>Box 6</li> </ul> Now let’s get these puppies on a Grid.
70. Setup <ul class="boxes"> <li>Box 1</li> <li>Box 2</li> <li>Box 3</li> <li>Box 4</li> <li>Box 5</li> <li>Box 6</li> </ul> Now let’s get these puppies on a Grid. .boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 1rem; }
71. Whoa! Hold Up.
72. Let’s Dissect This .boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 1rem; }
74. Mind. Blown.
75. Special Portfolio-Inspired Layout
76. Setup <ul class="portfolio"> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> <li>Item Four</li> <li>Item Five</li> </ul>
77. Setup <ul class="portfolio"> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> <li>Item Four</li> <li>Item Five</li> </ul> And setup our Grid container.
78. Setup <ul class="portfolio"> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> <li>Item Four</li> <li>Item Five</li> </ul> And setup our Grid container. .portfolio { display: grid; grid-auto-rows: minmax(100px, auto); grid-gap: 2px; grid-template-columns: repeat(6, 1fr); }
79. grid-auto-rows
80. Let’s Place Our Items .portfolio li:nth-child(1) { grid-column: 1 / -1; } .portfolio li:nth-child(2) { grid-column: 1 / span 2; grid-row-end: span 3; } .portfolio li:nth-child(3) { grid-column: 3 / span 4; grid-row-end: span 2; } .portfolio li:nth-child(4), .portfolio li:nth-child(5) { grid-column: span 2; }
82. Holy Jack City, Batman
83. The Power of CSS Grid
85. Why Now?
86. It’s Our Job
87. Simpler Code
88. New Amazing Layouts
89. I Delayed Learning Flexbox and Regret It
90. Feature Queries
91. Like This @supports (display:grid) { /* Grid CSS in here */ } @supports not (display:grid) { /* Fallback CSS here */ }
93. Browsers Ignore CSS They Don’t Understand
94. What Did We Learn?
95. 1 CSS Grid Is Awesome
96. 2 CSS Grid Is Friendly
97. 3 Use CSS Grid Today
98. Only the Beginning
99. Rachel Andrew gridbyexample.com
100. Jen Simmons labs.jensimmons.com
101. Mozilla Developer Network developer.mozilla.org
102. Questions? ttimsmith.com · @smithtimmytim
103. Thanks! ttimsmith.com · @smithtimmytim