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, thanks to the good folks over at CSSWG, who have been hard at work extending css layouting techniques, we have the gift of CSS Grid.

Implementing it turned out to be a breeze with CSS Grid. I can’t even begin to imagine doing it without. You could probably reach for masonry but it’d be complex in its own way and 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;
}

Anyway, here is the final result.