Kitchen tile backsplash

by Laura Kishimoto

HTML

<div class="wrapper">
  <div class="tile 001"></div>
  <div class="tile 002"></div>
  <div class="tile 003"></div>
  <div class="tile 004"></div>
  <div class="tile 005"></div>
  <div class="tile 006"></div>
  <div class="tile 007"></div>
  <div class="tile 008"></div>
  <div class="tile 009"></div>
  <div class="tile 010"></div>
  <div class="tile 011"></div>
  <div class="tile 012"></div>
  <div class="tile 013"></div>
  <div class="tile 014"></div>
  <div class="tile 015"></div>
  <div class="tile 016"></div>
  <div class="tile 017"></div>
  <div class="tile 018"></div>
  <div class="tile 019"></div>
  <div class="tile 020"></div>
  <div class="tile 021"></div>
  <div class="tile 022"></div>
  <div class="tile 023"></div>
  <div class="tile 024"></div>
  <div class="tile 025"></div>
  <div class="tile 026"></div>
  <div class="tile 027"></div>
  <div class="tile 028"></div>
  <div class="tile 029"></div>
  <div class="tile 030"></div>
  <div class="tile 031"></div>
  <div class="tile 032"></div>
  <div class="tile 033"></div>
  <div class="tile 034"></div>
  <div class="tile 035"></div>
  <div class="tile 036"></div>
  <div class="tile 037"></div>
  <div class="tile 038"></div>
  <div class="tile 039"></div>
  <div class="tile 040"></div>
  <div class="tile 041"></div>
  <div class="tile 042"></div>
  <div class="tile 043"></div>
  <div class="tile 044"></div>
  <div class="tile 045"></div>
  <div class="tile 046"></div>
  <div class="tile 047"></div>
  <div class="tile 048"></div>
  <div class="tile 049"></div>
  <div class="tile 050"></div>
  <div class="tile 051"></div>
  <div class="tile 052"></div>
  <div class="tile 053"></div>
  <div class="tile 054"></div>
  <div class="tile 055"></div>
  <div class="tile 056"></div>
  <div class="tile 057"></div>
  <div class="tile 058"></div>
  <div class="tile 059"></div>
  <div class="tile 060"></div>
  <div class="tile 061"></div>
  <div class="tile 062"></div>
  <div class="tile 063"></div>
  <div class="tile...

SCSS

@use 'sass:math';

$scale: 1;

$tile-width: 5.1em;
$tile-height: 16.1em;
$tile-radius: 0.7em;
$tile-spacing: 0.8em;

$colour-white: #f7f7f7;
$colour-green: #bdd2c9;
$colour-orange: #d5791e;
$colour-yellow: #edb30a;
$colour-pink: #e0b39f;

body {
  font-size: random(20);
  font-size: 1px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, $tile-width);
  grid-auto-rows: $tile-height;
  grid-gap: $tile-spacing;
  font-size: 0.2rem;
}

.tile {
  background-color: $colour-white;
  border-radius: $tile-radius;
  box-shadow: 1px 1px #eee;

  &:nth-child(10n) {
    /* border-right: 1px solid #ddd; */
  }

  &:nth-child(#{random(13) + 30}n + #{random(10) + 15}),
  &:nth-child(#{random(30) + 26}n + #{random(10) + 17}) {
    background-color: $colour-green;
  }
  
  &:nth-child(#{random(20) + 50}n + #{random(30) + 21}),
  &:nth-child(#{random(12) + 20}n + #{random(22) + 19}) {
    background-color: $colour-orange;
  }

}