JSFiddle - React, Tailwind, and code Playground

by AndreaLigios

HTML

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
  <grid-item>4</grid-item>
  <grid-item>5</grid-item>
  <grid-item>6</grid-item>
  <grid-item>7</grid-item>
</grid-container>

CSS

grid-container {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, 2.5vw 2.5vw); */ /* INVALID */
  /* grid-template-columns: repeat(auto-fill, 2.5vw); */       /* VALID */
  grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr)); /* VALID */
  grid-gap: 5px;
}

grid-item {
  border: 1px solid lightgray;
  background-color: lightgreen;
  display: flex;
}