Mondrian

I tried recreating, to the best of my abilities, Piet Mondrian’s Composition with Large Red Plane, Yellow, Black, Grey and Blue with vanilla CSS and HTML.


As beautiful as it is, to the uninitiated, that layout could look daunting and rightly so. But, owing to the great work done on layouting techniques, by the good folks over at CSSWG, we have the gift of CSS Grid.

Implementing it turned out to be a breeze with CSS Grid. Hard to imagine recreating it without grids. You could probably reach for masonry but it’d be complex in its own way and tha too with abysmal browser support.

The final markup and css turned out to be delightfully elegant.

HTML

<div class="a"></div>

CSS

grid-template-areas:
  'a a b b b c c r'
  'd e e e e f f r'
  'd e e e e f f r'
  'g e e e e h i r'
  'g e e e e h i r'
  'g j j k k l l r'
  'm j j n n o o s'
  'm p p q q q q s';

.a {
  grid-area: a;
}

Here’s the final result.