Css mondrian

by Julien Roche

HTML

<body>
  <ul class="mondrian">
    <li class="mondrian--grey"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--black"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--red"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--red"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--black"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--blue"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--black"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--red"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--red"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--black"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--blue"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--black"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--red"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--red"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--yellow"></li>
    <li class="mondrian--black"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--grey"></li>
    <li class="mondrian--blue"></li>
    <li class="mondrian--grey"></li>
    <li...

CSS

html, body {
  border: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  height: 100%;
  width: 100%;
}

body {
  display: flex;
}

.mondrian {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
  list-style: none;
}

.mondrian li {
  border: 5px solid #000000;
}

.mondrian li:nth-child(4n) {
  grid-column: span 2;
}

.mondrian li:nth-child(5n) {
  grid-row: span 2;
}

.mondrian--black {
  background-color: #000000;
}

.mondrian--blue {
  background-color: #0D7FBE;
}

.mondrian--grey {
  background-color: #F3F3F3;
}

.mondrian--red {
  background-color: #F50F0F;
}

.mondrian--yellow {
  background-color: #FAE317;
}