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!

Transcript

1. Charlotte Jackson, Ansarada @lottejackson Intro to CSS Grid
2. Intro to CSS Grid
3. Flexbox CSS grid
4. .parent { display: grid; }
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!
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; }
27. Thanks!