The Nitty-Griddy

This talk covers basic syntax and principles of CSS Grid layout and how it can be applied to practical use cases.

Transcript

1. The Nitty-Griddy modern CSS layouts by Noelle Knight
2. CSS Grid = CSS Grid Layout is a CSS method designed for the two-dimensional layout of items on a webpage or application. - Rachel Andrews • Flexible • Easy to use • 2-dimensional system
3. How can I start using CSS Grid? 1. Learn something. 2. Get out of your comfort zone.
4. Why should I start using CSS Grid? Historically: - Tables - Floats - Absolute Positioning Comfort Zone: - CSS Grid Frameworks (e.g. Bootstrap) - Flexbox (we still love you) - Some absolute positioning or floating Most of these things are hacky! We can do so much better now, thanks to CSS Grid
5. Grid Terminology Grid Container Grid Cell Grid Area Grid Line Grid Track
6. Grid Container
7. GTR and GTC
8. Grid Template
9. Fractional Units Allow you to set tracks as a fraction of the available free space, after inflexible items have been allocated.
10. Start, End and Span
11. Start, End, and Span Cont’d
12. Explicit and Implicit Grid
13. Changing the Layout
14. Source Order Independence • Order of items in source code doesn’t matter, you can declare where you want them to go. • Important to maintain the logical order in the source, this should not be designated by the CSS.
15. Grid Area
16. Grid Template Area
17. Nested Grids
18. Nested Grids Cont’d
19. Creating Layouts
20. Grid Template Area
21. GTA Cont’d
22. More Layouts
23. Responsiveness
24. Can I use CSS Grid?
25. Should I use CSS Grid • Progressive Enhancement (preferred) • Using MS prefixes • Source order independence restraint heck yes… but, use responsibly
26. CSS Grid Resources • Grid by Example - Rachel Andrews • CSS Grid - Wes Bos • Complete Guide to Grid - Chris House, CSS Tricks • Modern CSS Layouts - Scott Tolinski, Levelup Tuts • CSS Grid Garden
27. Thanks for listening to my talk The Nitty Griddy Github: noelleknight Twitter: @noelmknight LE S E H N E V O C OR N