Intro to CSS Grid

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/