Mondrian-Inspired CSS Grid Art Roundup
Mondrian’s bold black-line grids with primary color fills translate naturally to the web’s boxy layout model, a fact CSS developers keep revisiting. A recent surge of examples prompted this collection of notable experiments.
Van Gemert’s “Surprising” Grid Exercise
Many people have tried to recreate a work of art by Mondriaan with CSS. It seems like a nice and simple exercise: rectangles are easy with CSS, and now with grid, it is easy to recreate most of his works. I tried it as well, and it turned out to be a bit more complicated than I thought. And the results are, well, surprising.
Although grid makes the rectangles straightforward, van Gemert found the overall composition trickier than expected.
Simmons Adds Texture to Grid Art
In her Lab demo, Jen Simmons enhances a standard grid approach with an extra visual layer, deviating from the typically flat look to add depth to the Mondrian aesthetic.
The examples rely on CSS Grid as their core layout tool.
Schiffer’s Generative Take
I started with Mondrian not because he is my favorite artist (he is not), or that his work is very recognizeable (it is), but because I thought it would be a fun (yes) and easy start (lol nope) to this project.
Schiffer’s piece, titled var t;: Piet Mondrian, began as a seemingly simple entry point into a generative art project, a path she admits proved less trivial.
Wong’s DIY Tutorial
Riley Wong offers a thorough 12-step GitHub tutorial for creating your own Mondrian-style composition with code.
Fuhrer’s Generative Grid
Generative Piet Mondrian style art using CSS grid.
Adam Fuhrer’s submission describes itself as a generative interpretation driven by CSS Grid.
Broers’ Grid Rendition
John Broers rounds out the list with his own CSS Mondriaan Grid experiment.
