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


  1. 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
  2. 3.

    How can I start using CSS Grid? 1. Learn something.

    2. Get out of your comfort zone.
  3. 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
  4. 9.

    Fractional Units Allow you to set tracks as a fraction

    of the available free space, after inflexible items have been allocated.
  5. 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.
  6. 15.
  7. 25.

    Should I use CSS Grid • Progressive Enhancement (preferred) •

    Using MS prefixes • Source order independence restraint heck yes… but, use responsibly
  8. 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
  9. 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