Mundrian is known for his iconic painting style: bold black lines form a grid, and each cell is filled with red, yellow, blue and white. This minimalist aesthetic complements the rectangular structure of web pages and has attracted CSS developers to try variously over the years. Recently, I saw some Mondrian-style works created with CSS, so I decided to collect some excellent cases I have seen in the past and share them with you.

Vasilis van Gemert:

What if Mondrian used CSS instead of pigments?

Many people try to reproduce Mondrian's work with CSS. This seems like a simple and easy exercise: CSS is easy to create rectangles, and now with a grid, it is also easy to reproduce most of his work. I've tried it, and it turned out to be a little more complicated than I thought. And the result, well, is surprising.

Jen Simmons Lab:

Mondrian Art Based on CSS Grid

I like the texture details that Jen has added to the work. Like most examples, she uses CSS Grid heavily.

Jen Schiffer:

Variable t: Pete Mondrian

I chose Mondrian at the beginning not because he was my favorite artist (he wasn't), nor because his work was easy to recognize (it was easy to recognize), but because I thought it would be a fun (yes) and easy to get started (haha, no).

Riley Wong:

Create your own Mondrian-style painting with code

There is a 12-step tutorial on GitHub.

Adam Fuhrer:

CSS Mondrian

Peter Mondrian style art generated using CSS Grid.

John Broers:

Mondrian's work based on CSS Grid