JSFiddle - React, Tailwind, and code Playground

by Guillaume EHRET

HTML

<div class="grid">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
  <div class="six">6</div>
</div>

CSS

.grid{
		display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1em;
    grid-auto-rows: minmax(100px, auto);
		
	}
  .grid > div {
    border: 2px solid rgb(24,111,198);
    border-radius: 5px;
    background-color: rgba(33,150,243,.5);
    padding: 1em;
   }
	.one {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .two { 
    grid-column: 2 / 4;
    grid-row: 1 / 3;
  }
  .three {
    grid-column: 1;
    grid-row: 2 / 5;
  }
  .four {
    grid-column: 3;
    grid-row: 3;
  }
  .five {
    grid-column: 2;
    grid-row: 4;
  }
  .six {
    grid-column: 3;
    grid-row: 4;
  }