Let’s Learn CSS Grid - EE Conf

Febbffcb54abe1be1435720fc2268237?s=47 Tim Smith
October 12, 2017

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.

Febbffcb54abe1be1435720fc2268237?s=128

Tim Smith

October 12, 2017
Tweet

Transcript

  1. LET’S LEARN CSSGRID

  2. Hi there! I’m Tim Smith

  3. None
  4. None
  5. None
  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: #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; } }
  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. 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 */ }
  92. None
  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