JSFiddle - React, Tailwind, and code Playground

by fredhors

HTML

<div class="grid-wrapper">
  <div class="grid-item">Content A</div>
  <div class="grid-item">Content B</div>
  <div class="grid-item">Content C</div>
  <div class="grid-item">Content D</div>
  <div class="grid-item">Content E</div>
  <div class="grid-item">Content F</div>
  <div class="grid-item">Content G</div>
  <div class="grid-item">Content H</div>
  <div class="grid-item">Content I</div>
  <div class="grid-item">Content J</div>
  <div class="grid-item">Content K</div>
  <div class="grid-item">Content L</div>
  <div class="grid-item">Content A</div>
  <div class="grid-item">Content B</div>
  <div class="grid-item">Content C</div>
  <div class="grid-item">Content D</div>
  <div class="grid-item">Content E</div>
  <div class="grid-item">Content F</div>
  <div class="grid-item">Content G</div>
  <div class="grid-item">Content H</div>
  <div class="grid-item">Content I</div>
  <div class="grid-item">Content J</div>
  <div class="grid-item">Content K</div>
  <div class="grid-item">Content L</div>
  <div class="grid-item">Content A</div>
  <div class="grid-item">Content B</div>
  <div class="grid-item">Content C</div>
  <div class="grid-item">Content D</div>
  <div class="grid-item">Content E</div>
  <div class="grid-item">Content F</div>
  <div class="grid-item">Content G</div>
  <div class="grid-item">Content H</div>
  <div class="grid-item">Content I</div>
  <div class="grid-item">Content J</div>
  <div class="grid-item">Content K</div>
  <div class="grid-item">Content L</div>
  <div class="grid-item">Content A</div>
  <div class="grid-item">Content B</div>
  <div class="grid-item">Content C</div>
  <div class="grid-item">Content D</div>
  <div class="grid-item">Content E</div>
  <div class="grid-item">Content F</div>
  <div class="grid-item">Content G</div>
  <div class="grid-item">Content H</div>
  <div class="grid-item">Content I</div>
  <div class="grid-item">Content J</div>
  <div class="grid-item">Content K</div>
  <div class="grid-item">Content L</div>
 ...

CSS

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, 10vmax);
  grid-gap: 0.5rem;
  height: 100vh;
}

.grid-item {
  background: red;
}