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

Intro to CSS Grid

Intro to CSS Grid

Charlotte Jackson

November 22, 2017
Tweet

More Decks by Charlotte Jackson

Other Decks in Technology

Transcript

  1. None
  2. Charlotte Jackson Interface Developer & Product Manager @lottejackson

  3. Intro to CSS Grid Charlotte Jackson Interface developer, Ansarada @lottejackson

  4. Intro to CSS Grid Charlotte Jackson Interface developer, Ansarada @lottejackson

  5. Flexbox CSS grid

  6. .parent { display: grid; }

  7. None
  8. Track Track Track

  9. .parent { display: grid; grid-template-columns: 100px 100px 200px; grid-template-rows: 50px

    200px 50px; }
  10. .parent { display: grid; grid-template-columns: 100px 100px 200px; grid-template-rows: 50px

    200px 50px; } 100px 100px 200px 50px 200px
  11. .parent { display: grid; grid-template-columns: 100px 100px 200px; grid-template-rows: 50px

    200px 50px; grid-gap: 10px; }
  12. But what about a flexible grid?

  13. fr

  14. .parent { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px;

    }
  15. .parent { display: grid; grid-template-columns: repeat(3, 1fr); }

  16. .parent { display: grid; grid-template-columns: 1fr 2fr 1fr; }

  17. .parent { display: grid; grid-template-columns: 1fr 300px 1fr; }

  18. auto-fill auto-fit

  19. .parent { display: grid; grid-template-columns: repeat(auto-fill, 200px); }

  20. .parent { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

  21. .parent { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

  22. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  31. None
  32. Don’t stop!

  33. None
  34. None
  35. .Grid { display: grid; grid-template-columns: repeat(4, minmax(155px, 1fr)); } .Grid-item

    { grid-column: 2 / 4; } .Grid-item:nth-child(3n+2) { grid-column: 1 / 3; } .Grid-item:nth-child(5n+3), .Grid-item:nth-child(7n+5) { grid-column: 3 / 5; }
  36. .parent { grid-column: 2 / 4; }

  37. https://rachelandrew.co.uk

  38. http://jensimmons.com/

  39. @lottejackson Thanks

  40. @lottejackson http://cssgridgarden.com/