Piet Mondrian in CSS

Piet Mondria's iconic Composition with Red, Blue and Yellow (1930) is the perfect subject to recreate using CSS Grid. The geometric artwork is composed of blocks of color arranged in defined positions on a 2D grid. CSS Grid is designed for exactly this! You can define the block areas in just a few lines.

In the artwork above there are seven blocks of color. Defining how those seven blocks should appear relative to each other in a grid is defined in this single line of CSS: grid-template-areas: "a a b b b b" "c c b b b b" "c c b b b b" "d d e e e f" "d d e e e g";. Here is the code for Composition with Red, Blue and Yellow:

grid-template-areas: 
"a a b b b b" 
"c c b b b b" 
"c c b b b b" 
"d d e e e f" 
"d d e e e g";

Each line above (enclosed in quotes) represents a row of the grid. Once each area is defined, it's simple to tell which block belongs in which area. That would look like: .item2 { grid-area: b;}. A great, in-depth explanation of CSS Grid template areas is available from Smashing Magazine.

Composition II, an oil paint on canvas painted in 1922, is another of Mondrian's well known works. This piece is typical of the abstract style of art Mondrian is remembered for, and is deeply symbolic of his deep held philosophies about the world. The picture is currently on display at the Solomon R Guggenheim Museum in New York City.