The end goal, designed by Jennie Lewis from Sunside Studio.

Once upon a time, I might have had to begrudgingly tell a designer this type of layout wouldn’t work well on a responsive web page which needs to function across a range of screen sizes, but not anymore!

With CSS grid now available in all popular browsers it’s possible to reliably define the rows and columns that make up any kind of grid, I’m pretty excited about this and you should be too. In this article I’m going to detail how I achieved the designed layout using CSS grid without any silly workarounds or javascript magic necessary.

Defining The Grid

The first step…

Dan Webb

Web developer and maker writing about creating things for the web.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store