JSFiddle - React, Tailwind, and code Playground

by Katarn

HTML

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

CSS

.container {
  padding: 1px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  background: maroon;
  gap: 1px;
  width: 390px;
}

.element {
  background: teal;
  aspect-ratio: 1 / 1;
  box-shadow: 0 0 0 1px black;
}

.empty {
  background: maroon;
  grid-column-start: inherit;
}