CSS Grid Mondrian Challenge

About the artwork & artist

Piet Mondrian (1872–1944) was a Dutch painter and a founder of De Stijl. He reduced painting to essential elements—straight lines and primary colors—seeking visual balance and harmony. This study explores how to translate those relationships into a responsive grid using pure CSS.

Goal

Recreate the composition with CSS Grid, controlling line thickness and keeping the piece responsive.

Approach

Fractional grid-template-columns and grid-template-rows define the proportions. The black bars are simulated with container gap + padding. Each color block is positioned using grid-column/grid-row.

Technical details (challenge code only)

HTML

<div class="mondrian">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="item4"></div>
  <div class="item5"></div>
  <div class="item6"></div>
  <div class="item7"></div>
  <div class="item8"></div>
</div>

CSS (scoped inside .study-scope)

.mondrian {
  display: grid;
  grid-template-columns: 4.64fr 2.64fr 2.64fr 0.67fr;
  grid-template-rows: 9.16fr 2.91fr 3.48fr 0.45fr;
  gap: 10px;
  background-color: rgb(0, 0, 0);
  aspect-ratio: 1 / 1;
  box-shadow: -4px 5px 7px 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

.item1 { grid-column: 1 / 2; grid-row: 1 / 2; background-color: #e42c20; }
.item2 { grid-column: 2 / 5; grid-row: 1 / 2; background-color: #eeeeee; }
.item3 { grid-column: 1 / 2; grid-row: 2 / 5; background-color: #ebece7; }
.item4 {grid-row: 2 / 4; grid-column: 2 / 4; background-color: #eef1e6;}
.item5 {grid-column: 4 / 5; grid-row: 2 / 3; background-color: #144594;}
.item6 {grid-row: 3 / 5; background-color: #e9eae5; border-top: 6px solid #000;}
.item7 {grid-row: 4 / 5; background-color: #fbd721;}
.item8 {grid-row: 4 / 5; background-color: #242225;}