Introduction to CSS Grid

Introduction to CSS Grid

This is an introduction to building CSS Grid, building a multi column layout. Now we can build a responsive grid with only three lines of CSS!

C19ad910f6de3de7bfba85471496e0c4?s=128

Charlotte Jackson

October 26, 2017
Tweet

Transcript

  1. Charlotte Jackson, Ansarada @lottejackson Intro to CSS Grid

  2. Intro to CSS Grid

  3. Flexbox CSS grid

  4. .parent { display: grid; }

  5. None
  6. Track Track Track

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

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

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

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

  11. fr

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

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

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

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

  16. auto-fill auto-fit

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

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

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

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

  21. Don’t stop!

  22. None
  23. None
  24. .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; }
  25. .parent { grid-column: 2 / 4; }

  26. None
  27. Thanks!