Introduction to CSS Grid

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!