JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="wrapper">
   <div class="grid">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</div>

CSS

* {
  font-family: sans-serif;
}

body {
  padding: 3rem;
}

.wrapper {
  border: 4px dotted red;
  height:15rem;
}

.grid {
  display: grid;
  grid-row-gap: .5rem;
  grid-column-gap: .5rem;
  grid-template-rows: repeat(auto-fill, 6rem);
  grid-auto-flow: rows;
}

.item {
  border: 1px solid fuchsia;
  background-color: lightgray;
  padding: 1rem;
  width: 4rem;
  height: 4rem;
}