JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ratio r21-9" style="columns:4 50px">
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>
<br>
<div class="ratio r21-9" style="columns:3 200px">
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>

CSS

div{
  background:white;
  width: 400px;
  column-gap: 0;
}
figure{
  margin: 0;
  border: 1px solid red;
  max-width:100px;
}

.ratio figure {
  position: relative;
}
.ratio figure:before {
  content: '';
  display: block;
}
.ratio.r21-9 figure:before {
  padding-top: 42.86%;
}
.ratio.r16-9 figure:before {
  padding-top: 56.25%;
}
.ratio.r4-3 figure:before {
  padding-top: 75%;
}
.ratio.r1-1 figure:before {
  padding-top: 100%;
}