JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

SCSS

.gallery {
  display: flex;
  flex-wrap: wrap;
  border: solid 5px black;
  > * {
    flex-grow: 1;
    background: purple;
    min-width: 175px;
    max-width: 300px;
    margin: 5px;
    &:after {
      display: block;
      content: '';
      padding-bottom: 75%;
    }
  }
}