JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ratio r9-16" style="columns:100px; max-width:800px;">
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>
<br>
<div class="ratio r9-16" style="columns:100px; max-width:600px;">
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>
<br>
<div class="ratio r9-16" style="columns:100px; max-width:400px;">
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>
<br>
<div class="ratio r9-16" style="columns:100px; max-width:200px;">
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>

CSS

div{
  background:white;
  column-gap: 0;
  padding: .5em .25em .25em .25em;
}
figure{
  margin: 0;
  border: 1px solid red;
  max-width:100px;
}

.ratio figure {
  position: relative;
 margin: .5em .25em .25em .25em;
}
.ratio figure:first-child{
  margin-top: 0;
}
.ratio figure:before {
  content: '';
  display: block;
}
.ratio.r9-21 figure:before {
  padding-top: 233.33%;
}
.ratio.r21-9 figure:before {
  padding-top: 42.86%;
}
.ratio.r9-16 figure:before {
  padding-top: 177.77%;
}
.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%;
}