JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<div class="grid">
  <div class="grid-item grid-item-span-5 grid-item-col-span-4">1</div>
  <div class="grid-item grid-item-col-span-2 grid-item-span-3 grid-item-col-span-2">2</div>
  <div class="grid-item grid-item-col-span-2 grid-item-span-3 grid-item-col-span-2">3</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15%, 1fr));
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 5px;
  padding: 10px;
  background-color: #999999;
  border-radius: 5px;

}

.grid-item-col-span-2 {
  grid-column: span 2;
}

.grid-item-col-span-3 {
  grid-column: span 3;
}

.grid-item-col-span-4 {
  grid-column: span 4;
}

.grid-item-col-span-5 {
  grid-column: span 5;
}

.grid-item-col-span-6 {
  grid-column: span 6;
}

.grid-item-span-2 {
  grid-row-end: span 2;
}

.grid-item-span-3 {
  grid-row-end: span 3;
}

.grid-item-span-4 {
  grid-row-end: span 4;
}

.grid-item-span-5 {
  grid-row-end: span 5;
}

.grid-item-span-6 {
  grid-row-end: span 6;
}

.grid-item {
  border-radius: 5px;
  background-color: #ccc;
  border: 1px solid #000000;
  padding: 5px;
}

@media only screen and (max-width: 640px) {
  .grid {
    width: 98% !important;
    min-width: 98% !important;
    max-width: 98% !important;
    grid-template-columns: repeat(auto-fit, minmax(98%, 1fr));
    display: block;
    padding: 5px;
    margin: -7px;
  }
  .grid-item {
    display: block;
    padding: 15px;
    margin: 10px;
  }

}