JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div class="table">

  <div class="cell">
    <img src="img/forest.jpg">
  </div>

  <div class="cell">
    <img src="img/snow.jpg">
  </div>

  <div class="cell">
    <img src="img/winter.jpg">
  </div>


  <div class="cell">
    <img src="img/eclipse.jpg">
  </div>

  <div class="cell"></div>

  <div class="cell">
    <img src="img/moon.jpg">
  </div>

  <div class="cell">
    <img src="img/trees.jpg">
  </div>

</div>

SCSS

.table {
  display: grid;
  grid-gap: 5px;
  grid-template-areas: "a b b b" "c b b b" "d e e f" "g g g f";
  .cell {
    &:nth-child(1) {
      grid-area: a;
      background: red;
    }
    &:nth-child(2) {
      grid-area: c;
      background: blue;
    }
    &:nth-child(3) {
      grid-area: b;
      background: yellow;
    }
    &:nth-child(4) {
      grid-area: d;
      background: teal;
    }
    &:nth-child(5) {
      grid-area: e;
      background: green;
    }
    &:nth-child(6) {
      grid-area: g;
      background: purple;
    }
    &:nth-child(7) {
      grid-area: f;
      background: black;
    }
  }
}