<div class="animated-grid">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
  <div class="cell">d</div>
  <div class="cell">e</div>
  <div class="cell">f</div>
  <div class="cell">g</div>
  <div class="cell">h</div>
  <div class="cell">i</div>
  <div class="cell">j</div>
  <div class="cell">k</div>
  <div class="cell">l</div>
  <div class="cell">🍑</div>
</div>
<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
</div>

:root {
  --size: 240px;
  --animation-delay: 0.1s;
}
body {
  background-color: #000;
}
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--size), 1fr));
  grid-auto-rows: var(--size);
}

.grid .cell {
  grid-area: initial !important;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0f0f0f;
  color: #fff;
  transition: transform .2s ease-in;
  
  &:hover {
    transform: scale(1.03);
  }
}

.animated-grid {
  height: 85vh;
  display: grid;
  gap: 1rem;
  grid-template-areas:
    "a b c d"
    "l 🍑 🍑 e"
    "k 🍑 🍑 f"
    "j i h g";
  grid-template-rows: repeat(4, 25%);
  grid-template-columns: var(--size) auto auto var(--size);
}

@keyframes animateCell {
  from {
    opacity: 0;
    transform: scale(0.3);
    filter: hue-rotate(180deg);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: hue-rotate(0deg);
  }
}

.animated-grid .cell {
  background-color: rgb(36, 243, 147);
  animation: animateCell 600ms ease-out;
  animation-fill-mode: backwards;
}

$grid-areas: (
  1: a,
  2: b,
  3: c,
  4: d,
  5: e,
  6: f,
  7: g,
  8: h,
  9: i,
  10: j,
  11: k,
  12: l,
  13: 🍑,
);

@each $i, $area in $grid-areas {
  .cell:nth-child(#{$i}) {
    grid-area: $area;
    animation-delay: calc(#{$i} * var(--animation-delay));
  }
}