CSS Grid Layout x Mondrian

Year
2017
Client
Toaster
Link
View project

Description

To celebrate the added support for CSS grid by 3 major browsers within the same month, Toaster asked me to create a little sketch that made use of this technology. The result is an interactive tool to generate Mondrian-like artworks.

The main idea behind this project is an algorithm that splits the canvas recursively into CSS sub-grids. The algorithm randomly determines what cells to merge, what cells to split into sub-grids, and the fill colours.

The sketch got featured by CSS tricks on Twitter and in their weekly newsletter.

Media