JSFiddle - React, Tailwind, and code Playground

by Van Hai Le

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

CSS

.grid-container {
  display: grid;
  background-color: salmon;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: repeat(3, 50px);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  padding: 15px;
}

.grid-item {
  background: indianred;
  padding: 15px;
}