Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let’s Learn CSS Grid - EE Conf

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.

Tim Smith

October 12, 2017
Tweet

More Decks by Tim Smith

Other Decks in Design

Transcript

  1. Agenda 1. Problems we’ve had with layout 2. What is

    CSS Grid and how does it solve these problems?
  2. 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?
  3. 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
  4. 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%; }
  5. 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; }
  6. 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; } }
  7. “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
  8. fr

  9. 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; }
  10. 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; }
  11. 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"; } }
  12. 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.
  13. 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; }
  14. 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.
  15. 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); }
  16. 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; }
  17. Like This @supports (display:grid) { /* Grid CSS in here

    */ } @supports not (display:grid) { /* Fallback CSS here */ }