Intro to CSS Grid

Transcript

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; }
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));
30. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
32. Don’t stop!
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/