Don't Use My Grid System (or any others)

A presentation at Beyond Tellerrand in May 2018 in Düsseldorf, Germany by Miriam Suzanne

Web layout has always been a hack — compounded by responsive design, web application needs, and the desire for consistency. Join the creator of Susy (a meta grid-system) for a review of layout and grid techniques — when to use them, what to consider, and how to roll your own layouts with minimum code. We'll look at everything from floats to CSS Grid, flexbox, and even custom properties — and how to start using the new toys right away, with only a few lines of code.

  • When to use floats, CSS Grid, flexbox, custom properties, and other techniques
  • How to make grid-math simple, and lose the grid-system
  • How to make grid-systems work for you when you need them

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

  • Grid By Example

    CSS Grid tutorials, along with sample layouts, and common fallback patterns.

  • Labs.JenSimmons

    Grid inspiration!

  • CSS Grid Invaders

    Generative art using html, css variables, and css grids. Original concept created in Processing by Levitated Toys.

Buzz and feedback

Here’s what was said about this presentation on Twitter.