Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Nitty-Griddy

The Nitty-Griddy

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


Noelle Knight

June 07, 2018

Other Decks in Technology


  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