Let's Learn CSS Grid - FEDC

Transcript

1. LET’S LEARN CSSGRID
2. Hi there! I’m Tim Smith
4. YouTube Channel youtube.com/smithtimmytim
5. Thank You
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: #333; flex: 1 1 30%; } main { background-color: #333; 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: #333; 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. The Time is Now
86. Simpler Code
87. New Amazing Layouts
88. I Delayed Learning Flexbox and Regret It
89. Feature Queries
90. Like This @supports (display:grid) { /* Grid CSS in here */ } @supports not (display:grid) { /* Fallback CSS here */ }
92. Browsers Ignore CSS They Don’t Understand
93. What Did We Learn?
94. 1 CSS Grid Is Awesome
95. 2 CSS Grid Is Friendly
96. 3 Use CSS Grid Today
97. Only the Beginning
98. Rachel Andrew gridbyexample.com
99. Jen Simmons labs.jensimmons.com
100. Mozilla Developer Network developer.mozilla.org
101. Read The Spec w3.org/TR/css-grid-1/
102. Thanks! ttimsmith.com · @smithtimmytim