Let's Learn CSS Grid - FEDC

Transcript

1. LET’S LEARN CSSGRID

2. Hi there! I’m Tim Smith

3. None

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?

20. None

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; } }
35. None

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; }
61. None

62. What If? body { grid-template-areas: ". header" "aside main" ".

    footer"; }
63. None
64. None

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"; } }
66. None

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; }
73. None

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; }
81. None

82. Holy Jack City, Batman

83. The Power of CSS Grid

84. None

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 */ }
91. None

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