megafauna.

Bauhaus CSS - A Piet Mondrian Imitation

Cover Image for Bauhaus CSS - A Piet Mondrian Imitation
Alex Zielonko
Alex Zielonko

Google's "Doodles" recently featured the 100th Anniversary of Bauhaus. Previously ignorant of this movement's name and legacy, I felt inspired to create an imitation of a painting I can now attribute to Piet Mondrian. But, I don't have any paint and couldn't put it to good use if I did. I instead opted for a medium in which I am confident, HTML and CSS:

Code

HTML

<div class="painting">
  <div class="top-left-center">
    <div class="top-left-one"></div>
  </div>
  <div class="top-left-right"></div>
  <div class="center-left"></div>
  <div class="center-center">
    <div class="center-red"></div>
    <div class="center-center-bottom-black"></div>
  </div>
  <div class="far-right"></div>
  <div class="center-right">
    <div class="center-right-yellow"></div>
    <div class="center-right-split"></div>
    <div class="center-right-bottom"></div>
  </div>
  <div class="bottom-yellow"></div>
  <div class="bottom-left-whites">
    <div class="bottom-left-whites-top"></div>
  </div>
  <div class="bottom-center-right-white"></div>
  <div class="bottom-center-right-black"></div>
  <div class="bottom-blue"></div>
  <div class="bottom-center-right-bottom"></div>
  <div class="bottom-red"></div>
</div>

CSS

* {
  box-sizing: border-box;
}

.painting {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 0.9fr 0.3fr;
  grid-gap: 0;
  max-width: 720px;
  border: 4px solid black;
  margin: 0 auto 24px;
}
.top-left-center {
  background-color: white;
  border-right: 16px solid black;
  border-bottom: 16px solid black;
  grid-area: 1 / 1 / 1 / 4;
}

.top-left-one {
  width: 41%;
  height: 48px;
  border-right: 16px solid black;
}

.top-left-right {
  grid-area: 1 / 4 / 1 / 5;
  border-right: 16px solid black;
  border-bottom: 16px solid black;
  background-color: #ebc642;
}

.far-right {
  grid-area: 1 / 5 / 6;
  border-bottom: 16px solid black;
  background-color: white;
}

.center-left {
  background-color: white;
  height: 464px;
  grid-area: 2 / 1 / 4 / 2;
  border-right: 16px solid black;
  border-bottom: 16px solid black;
}

.center-center {
  grid-area: 2 / 2 / 4 / 4;
  border-right: 16px solid black;
  border-bottom: 16px solid black;
  background-color: white;
}

.center-red {
  grid-area: 2 / 2 / 3 / 4;
  border-bottom: 16px solid black;
  height: 348px;
  background-color: #de3324;
}

.center-center-bottom-black {
  grid-area: 3 / 2 / 4 / 4;
  background-color: black;
  border-right: 16px solid black;
  height: 100px;
  width: 188px;
}

.center-right {
  grid-area: 2 / 4 / 4 / 5;
  border-right: 16px solid black;
  border-bottom: 16px solid black;
  background-color: white;
}

.center-right-yellow {
  grid-area: 2 / 4 / 3 / 5;
  border-bottom: 16px solid black;
  background-color: #ebc642;
  height: 189px;
}

.center-right-split {
  grid-column-start: 4;
  grid-column-end: 5;
  border-right: 16px solid black;
  width: 62%;
  height: 143px;
}

.center-right-bottom {
  border-top: 16px solid black;
}

.bottom-yellow {
  grid-area: 6 / 1 / 9 / 2;
  background-color: #ebc642;
  border-right: 16px solid black;
  height: 148px;
}

.bottom-left-whites {
  grid-area: 6 / 2 / 9 / 3;
  border-right: 16px solid black;
  background-color: white;
}

.bottom-left-whites-top {
  border-bottom: 16px solid black;
  height: 65px;
}

.bottom-center-right-white {
  grid-area: 6 / 3 / 7 / 4;
  border-right: 16px solid black;
  border-bottom: 16px solid black;
  height: 65px;
  background-color: white;
}

.bottom-center-right-black {
  grid-area: 7 / 3 / 8 / 4;
  border-right: 16px solid black;
  border-bottom: 16px solid black;
  height: 60px;
  background-color: black;
}

.bottom-blue {
  grid-area: 6 / 4 / 8 / 5;
  border-right: 16px solid black;
  border-bottom: 16px solid black;
  background-color: #302cd7;
}

.bottom-center-right-bottom {
  grid-area: 8 / 3 / 9 / 5;
  background-color: white;
  border-right: 16px solid black;
  height: 23px;
}

.bottom-red {
  grid-area: 6 / 5 / 9;
  background-color: #de3324;
}

Notes

The exercise marks my first foray with CSS Grid Layout. And while I wouldn't look to this example as the best way to leverage the CSS grid, it is a way. At least, it proved a pleasant approach to render my imitation on a rainy spring afternoon.

The previously linked CSS Grid Layout docs proved sufficient in getting started. However, the grid-area:property get a shout-out. While rendering the "painting" I initially opted for the verbose properties,

grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 3;
grid-column-end: 4;

As I became more familiar with the Grid Layout properties, I found the shorthand preferable,

grid-area: 1 / 3 / 2 / 4;