As a former print designer, I've long been frustrated by the block style of web layouts, especially when the wrinkle of responsive design has been added. A recent exercise at creating a web page without using an established framework (like Bootstrap) led me to discover CSS Grid. This is the most wonderful tool I've found in years for web design.

I took the example of the Responsive Mondrian YouTube video and the Grid by Example "Line-based placement named lines with spans" tutorial to create a Responsive CSS Grid Mondrian Tableau painting.

Unlike the YouTube video, I decided to use background colors so that my elements wouldn't require the use of image links. I found a Mondrian image that showed a sufficient variation of colors to use to compose the grid.

Mondrian doesn't use exact measurements in his painting, but I chose to make each row and column 50px, and make the shapes match that. I counted out 43 different shapes in this particular painting, and wrote 43 empty divs in the HTML file. I then hard-coded each div in CSS to match the painting as best as I could.

If you resize the grid so that it is 14 columns wide, you'll see the painting as it most closely resembles the original. But if you resize the window, you'll see the painting re-flow to make a new interpretation.

You can tell when the resize isn't quite perfect, as the border lines drop off. After experimenting with making the wrapper div background-color black and a grid-gap of 6, I decided that I'd go with making the individual divs have a solid black border instead, as Mondrian seemed to favor white over black.

Link to the graphic on CodePen.