JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

CSS

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 2vw;
}

#grid > div {
  font-size: 5vw;
  padding: .5em;
  background: gold;
  text-align: center;
}