One of the things I love (and that I’ve kind of missed for a few years) is that penny drop moment of coding where you realise that there’s probably a more efficient way of doing something. I’ve talked recently about trying to find that “use case” for emerging tech with regards to hot and trendy frameworks, but the mighty YouTube algorithm delt me a video this morning that’s kind of made me rethink my approach to HTML and CSS layouts. Give it a watch:

Finished? Okay, so Morten Rand-Hendriksen covers the subject pretty well in that video but the tl;dr is, by using CSS Grid you can write super slim, semantic HTML and focus on using CSS to do what it’s designed for – lay out your content.

In particular, the grid approach almost makes things like Bootstrap redundant in both its simplicity and flexibility. Your content exists as logical and semantic markup which could essentially be in whatever order you want (keep it logical, though, yeah?) and the grid definitions in the CSS tell the browser where to put that content. If you’re clever with your media queries you can then use that grid definition, or even define a new definition, to reconfigure your site on the fly for different browser resolutions. No Javascript, no fiddly wrapping divs. Mind = blown.

The good thing is, grid is also pretty well supported by modern browsers, but as per Morten’s suggestion you can use feature queries to deliver a standard, basic mobile view for those browsers that don’t support it.

EDIT: In doing some further digging, the method of using @supports not to detect browser support might not be the best, as some browsers which you might need to support don’t support @supports not (that’s a lot of supports). So a good fallback would be to just code your basic CSS as you’d want the fallback to look and override that in your @supports sections.

I had a little play and knocked up an example of my own:

I definitely feel like I want to follow this up further – I’ve relied on Bootstrap for a few years now and while it’s definitely helped me get started quickly on projects I’ve always felt like it’s sometimes pushing too much at sites where it’s not needed. I’ll need to do further testing but if Grid can make my layouts just as efficient and my HTML more semantic – yeah, I’m up for that!

As always, drop your thoughts below!

Photo by Flickr user sarowen