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

Prototyping Layout with CSS Grid - RevolutionCo...

Prototyping Layout with CSS Grid - RevolutionConf 2018

Presented at RevolutionConf, May 2018

Jessica Eldredge

May 18, 2018
Tweet

More Decks by Jessica Eldredge

Other Decks in Technology

Transcript

  1. Our requirements • Responsive: grid context changes across breakpoints •

    Use CSS Grid! • Fallback for browsers that don’t support grid
  2. CSS Grid • Layout in 2 dimensions • Children can

    be placed in open cells of the grid
  3. CSS Grid • Layout in 2 dimensions • Children can

    be placed in open cells of the grid
  4. CSS Grid • Layout in 2 dimensions • Children can

    be placed in open cells of the grid
  5. Markup for cuttlefish layout <div class="wrapper"> <div class="grid"> <h1 class="heading">Cuttlefish

    Are Awesome!</h1> <div class="item item-1"> … </div> <div class="item item-2"> … </div> <div class="item item-3"> … </div> <div class="item item-4"> … </div> <a class="see-more">See more facts</a> </div> </div>
  6. Centering our content wrapper .wrapper { max-width: 20em; margin-left: auto;

    margin-right: auto; } @media screen and (min-width: 48em) { .wrapper { max-width: 38em; } } @media screen and (min-width: 64em) { .wrapper { max-width: 55em; } }
  7. .grid { display: grid; grid-template-columns: 40px 40px 40px; } .grid

    { display: grid; grid-template-columns: 1fr 1fr 1fr; } Grid-template-columns
  8. .grid { display: grid; grid-template-columns: 40px 40px 40px; } .grid

    { display: grid; grid-template-columns: 1fr 1fr 1fr; } .grid { display: grid; grid-template-columns: 1fr 2fr 1fr; } Grid-template-columns
  9. .grid { display: grid; grid-template-columns: 40px 40px 40px; } .grid

    { display: grid; grid-template-columns: 1fr 1fr 1fr; } .grid { display: grid; grid-template-columns: 1fr 2fr 1fr; } .grid { display: grid; grid-template-columns: 100px 25% 1fr; } Grid-template-columns
  10. .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; }

    // Shorthand is equivalent to: // grid-column-gap: 0.75em; // grid-row-gap: 0.75em; Grid-gap
  11. @media screen and (min-width: 48em) { .grid { grid-template-columns: repeat(12,

    1fr); } } @media screen and (min-width: 64em) { .grid { grid-template-columns: repeat(15, 1fr); grid-gap: 1.25em; } } Responsive grid settings
  12. .grid > * { grid-column: 1 / span 6;
 }

    // Shorthand is equivalent to: // grid-column-start: 1; // grid-column-end: span 6; Grid-column: span syntax
  13. .grid > * { grid-column: 1 / span 6;
 }

    // Shorthand is equivalent to: // grid-column-start: 1; // grid-column-end: span 6; Grid-column: span syntax
  14. .grid > * { grid-column: 1 / -1;
 } //

    Shorthand is equivalent to: // grid-column-start: 1; // grid-column-end: -1; Grid-column: negative grid lines
  15. .grid { display: grid; } .grid { display: grid; grid-template-columns:

    repeat(6, 1fr); } .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; }
  16. .grid { display: grid; } .grid { display: grid; grid-template-columns:

    repeat(6, 1fr); } .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } .grid > * { grid-column: 1 / span 6; }
  17. Detour! The implicit grid • Explicit grid: 
 The grid

    we define with grid-template-columns or grid-template-rows • Implicit grid: 
 Automatically-created tracks to accommodate additional content
  18. @media screen and (min-width: 48em) { } @media screen and

    (min-width: 48em) { .heading { grid-column: 1 / span 9; } .see-more { grid-column: 10 / span 3; } }
  19. @media screen and (min-width: 48em) { .heading { grid-column: 1

    / span 9; grid-row: 1; } .see-more { grid-column: 10 / span 3; grid-row: 1; } }
  20. @media screen and (min-width: 48em) { .item-1 { grid-column: 1

    / span 12; } .item-2 { grid-column: 1 / span 4; } .item-3 { grid-column: 5 / span 4; } .item-4 { grid-column: 9 / span 4; } }
  21. @media screen and (min-width: 64em) { } @media screen and

    (min-width: 64em) { .heading { grid-column: 1 / span 12; } .see-more { grid-column: 13 / span 3; } }
  22. @media screen and (min-width: 64em) { .item-2 { grid-column: 13

    / span 3; } .item-3 { grid-column: 13 / span 3; } .item-4 { grid-column: 13 / span 3; } }
  23. • No auto-placement of grid items • No grid-gap •

    Grid-column shorthand only specifies start line -ms-grid syntax limitations Applies to IE11, MS Edge <16
  24. Using feature queries to target CSS Grid at modern browsers

    @supports (display: grid) { // css grid styles go here }
  25. Using feature queries to target CSS Grid at modern browsers

    @supports (display: grid) { // css grid styles go here } .grid { display: flex; }
  26. .grid { display: flex; flex-wrap: wrap; flex-direction: column; } .grid

    > * { flex: 1 1 auto; } @supports (display: grid) { // css grid styles go here }
  27. .grid { display: flex; flex-wrap: wrap; flex-direction: column; margin: -0.375rem;

    } .grid > * { flex: 1 1 auto; margin: 0.375rem; } @supports (display: grid) { // css grid styles go here }
  28. .grid { display: flex; flex-wrap: wrap; flex-direction: column; margin: -0.375rem;

    } .grid > * { flex: 1 1 auto; margin: 0.375rem; } @supports (display: grid) { // css grid styles go here } .grid { display: flex; flex-wrap: wrap; flex-direction: column; margin: -0.375rem; } .grid > * { flex: 1 1 auto; margin: 0.375rem; } @supports (display: grid) { .grid, .grid > * { margin: 0; } }
  29. @media screen and (min-width: 48em) { .grid { flex-direction: row;

    } .heading { flex-basis: calc(75% - 0.75rem); } .item-1 { flex-basis: calc(100% - 0.75rem); } .item-2, .item-3, .item-4 { flex-basis: calc(33.333% - 0.75rem); } .see-more { flex-basis: calc(25% - 0.75rem); } }
  30. @media screen and (min-width: 48em) { .heading { order: 1;

    } .see-more { order: 2; } .item-1 { order: 3; } .item-2 { order: 4; } .item-3 { order: 5; } .item-4 { order: 6; } } @supports (display: grid) { .grid > * { order: unset; } }
  31. @media screen and (min-width: 64em) { .grid { margin: -0.625rem;

    } .grid > * { margin: 0.625rem; } } @media screen and (min-width: 64em) { .heading, .item-1 { flex-basis: calc(80% - 1.25rem); } .item-2, .item-3, .item-4, .see-more { flex-basis: calc(20% - 1.25rem); } }
  32. @media screen and (min-width: 64em) { .grid { margin: -0.625rem;

    } .grid > * { margin: 0.625rem; } } @media screen and (min-width: 64em) { .heading, .item-1 { flex-basis: calc(80% - 1.25rem); } .item-2, .item-3, .item-4, .see-more { flex-basis: calc(20% - 1.25rem); } }
  33. @media screen and (min-width: 64em) { .heading { flex-basis: calc(80%

    - 1.25rem); } .item-1 { flex-basis: calc(100% - 1.25rem); } .item-2, .item-3, .item-4 { flex-basis: calc(33.333% - 1.25rem); } .see-more { flex-basis: calc(20% - 1.25rem); } }
  34. • Named column lines • grid-template-area • grid-auto-rows / grid-auto-columns

    / grid-auto-flow • auto-fill & auto-fit • minmax More Grid features
  35. • Source order and semantics are important • Use grid

    placement for visual display, but be mindful of document order for speech and keyboard navigation • Tab order will follow document order, not visual order CSS Grid and Accessibility
  36. – Miriam Suzanne http://oddbird.net/2017/06/28/susy3/ “If you have the browser-support matrix

    to start using the CSS Grid module directly, you should do it, and forget about Susy.”
  37. Resources • Rachel Andrew: https://gridbyexample.com/learn/ • Jen Simmons: http://jensimmons.com/post/feb-27-2017/learn-css-grid •

    MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout • CSSWG: https://github.com/w3c/csswg-drafts/issues
  38. • Download Firefox! • Examine your browser support requirements •

    Start CSS Grid conversation between design and development • Choose a feature and start using CSS Grid Layout! Next Steps