The End of Media Queries (is a good thing…)

There’s a new toy in the world of web design: CSS Grid.

To cut a long story short, and to get straight to the point, this super-flexible super-powerful bit of awesomeness allows us to create fully responsive layouts with a single line of code.

Which means mentally complex media queries, where we would have to account for every screen size on the market (and there are quite a few, by the way. Thanks Android.), are a thing of the past.

How it’s done.

Let’s say we have 6 images on a page. The html would simply be this:

Alone, this wouldn’t be very pretty. It’d make for a single column, with six images that don’t fit the width of the page.

Umm… there’s a manta ray in here somewhere…

To style it, obviously we need to add some CSS. This brings us onto CSS Grid.

It’s the little bit of code on line 4 that makes the ugly html above into responsive image grid awesomeness:

Cool, hey?

This is just a tiny example of what can be done with CSS Grid, and reducing hundreds of media queries into a single line of code can only be a good thing for site loading times, and there SEO ranking.

With browser support at 77% of web traffic and climbing rapidly, 2018 will be the year for CSS Grid for sure.

To learn more about CSS Grid, read the excellent article this was taken from on Medium, and be sure to check out some incredible examples of CSS Grid used by some creative geniuses.

Leave a Comment

Your email address will not be published. Required fields are marked *