JSFiddle - React, Tailwind, and code Playground

by antibland

HTML

<div class="container">
  <div class="item1 item"></div>
  <div class="item2 item"></div>
  <div class="item3 item"></div>
</div>

CSS

.item {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

.container {
  justify-content: center;
  display: grid;
  grid-gap: 1rem;
  grid-template-areas: "item item1 item2 item2 item3 item3";
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

@media screen and (max-width: 720px) {
  .container {
    grid-template-areas: ". item1 item1 item2 item2 ."
      ". . item3 item3 . .";
  }
}