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.
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!