Intro to CSS Grid

Intro to CSS Grid

C19ad910f6de3de7bfba85471496e0c4?s=128

Charlotte Jackson

November 22, 2017
Tweet

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/