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

Let's Learn CSS Grid - FEDC

Tim Smith
April 27, 2018

Let's Learn CSS Grid - FEDC

Tim Smith

April 27, 2018
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: #333; flex: 1 1 30%; } main { background-color: #333; 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: #333; 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 */ }