Super-powered Layouts with CSS Grid and CSS Variables

A presentation at State Of The Browser 2018 in in London, UK by Michelle Barker

CSS Grid Layout has the ability to transform the way we build layouts on the web and has made things possible that were never possible before. I’ll provide an overview of the various methods for building layouts with CSS Grid and demonstrate how it can help us construct complex components.

I’ll discuss how CSS Variables (custom properties) can bring even more power to our CSS and give us finer control over our responsive grids, and how these dynamic variables can be changed in CSS and Javascript to afford some exciting possibilities.

Resources

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

  • Codepen demos

    A collection of the CSS Grid demos referenced in this presentation