JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="grid a">1</div>
<div class="grid b">2</div>
<div class="grid c">3</div>
<div class="grid d">4</div>
<div class="grid e">5</div>

CSS

body {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "one two three"
  "one four five";
  width: 800px;
}

.grid {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.a {
  /* grid-area: one; */
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
}

.b {
  /* grid-area: two; */
    grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 3;
}
.c {
  /* grid-area: three; */
    grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start:3;
  grid-column-end: 4;
}

.d {
  /* grid-area: four; */
    grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}
.e {
  /* grid-area: five; */
    grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 3;
  grid-column-end: 4;
}