Create a responsive grid layout with no media queries, using CSS Grid

andy-bell.design

I really am falling more in love with CSS Grid and Custom Properties everyday — (I don't get out much!). This is a fab solution by Andy Bell and there isn't a media query in sight!

Embracing the flexible nature of the web gives us powerful, resilient front-ends, where instead of using specific sizes, we give elements sensible boundaries and let them auto-fill where possible. I embrace this mentality as much as possible and roll utilities out like this one for grid layouts.

— Andy Bell

While CSS Grid hasn't got full browser support just yet, it is in the region upwards of 92%. Which certainly isn't to be sniffed at. And, with some decent progressive enhancement considerations, this solution doesn't leave users with less capable browsers behind.

Utilising the forgiving nature of CSS to build up, rather than fix and break down will very likely result in you writing better, lighter code, so finding the lowest-tech approach to compatibility issues is only ever going to be a good thing.

— Andy Bell

I also love the My Browser web app Andy created by the way.

Back to links