JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="grid">
  <div class="row">
    <div class="col grid-col-start-1 grid-col-end-2"></div>
    <div class="col grid-col-start-3 grid-col-end-4"></div>
    <div class="col grid-col-start-5 grid-col-end-8"></div>
  </div>
</div>

CSS

.grid {
  display: grid;
  
  grid-template-rows: 1fr;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: .5rem;
}

.row {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
  grid-column: span 10;
  outline: 2px dashed red;
}

.col {
  height: 10rem;
  background-color: fuchsia;
  outline: 2px solid white;
}

.grid-col-start-1 {
  grid-column-start: 1;
}

.grid-col-start-2 {
  grid-column-start: 2;
}


.grid-col-start-3 {
  grid-column-start: 3;
}

.grid-col-start-4 {
  grid-column-start: 4;
}

.grid-col-start-5 {
  grid-column-start: 5;
}




.grid-col-end-2 {
  grid-column-end: 2;
}

.grid-col-end-3 {
  grid-column-end: 3;
}

.grid-col-end-4 {
  grid-column-end: 4;
}


.grid-col-end-8 {
  grid-column-end: 8;
}