JSFiddle - React, Tailwind, and code Playground

by iamjpg

HTML

<div class="container">
  <div>
    Yo
  </div>
  <div>
    Yo
  </div>
  <div>
    Yo
  </div>
  <div>
    Yo
  </div>
  <div>
    Yo
  </div>
  <div>
    Yo
  </div>
  <div>
    Yo
  </div>
  <div>
    Yo
  </div>
  <div>
    Yo
  </div>
</div>

CSS

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);
    -ms-grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    -ms-grid-template-rows: repeat(2, 100px);
}

.container div {
  min-height: 100px;
  background: #fff;
}