JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ej2 ratio r1-1" style="width:5em;">Ratio</div>
<div class="ej2 ratio r1-1" style="width:9em;">Ratio 1:1</div>

<div class="ej2 ratio r16-9" style="width:5em;">Ratio</div>
<div class="ej2 ratio r16-9" style="width:9em;">Ratio 16:9</div>

<br>

<div class="ej1" style="width: 400px;">
  <div>Div</div>
  <div>Div</div>
  <div>Div</div>
  <div>Div</div>
  <div>Div</div>
  <div>Div</div>
  <div>Div</div>
</div>

<br>

<div class="ej3" style="max-width: 10%;">
  <div class="ej2 ratio r1-1">Div</div>
  <div class="ej2 ratio r1-1">Div</div>
</div>

<br>

<div class="ej3" style="max-width: 400px;">
  <div class="ej2 ratio r1-1">Div</div>
  <div class="ej2 ratio r1-1">Div</div>
  <div class="ej2 ratio r1-1">Div</div>
  <div class="ej2 ratio r1-1">Div</div>
  <div class="ej2 ratio r1-1">Div</div>
  <div class="ej2 ratio r1-1">Div</div>
  <div class="ej2 ratio r1-1">Div</div>
</div>

<br>

<div class="ej3" style="max-width: 30%;">
  <div class="ej2 ratio r1-1">Div</div>
  <div class="ej2 ratio r1-1">Div</div>
  <div class="ej2 ratio r1-1">Div</div>
  <div class="ej2 ratio r1-1">Div</div>
  <div class="ej2 ratio r1-1">Div</div>
  <div class="ej2 ratio r1-1">Div</div>
  <div class="ej2 ratio r1-1">Div</div>
</div>

CSS

*{
  box-sizing: border-box;
}
body{margin: 0; padding: 0;}
body>*{margin: .5em;}
.ej1,.ej3{
  background: yellow;
  columns: 100px 3;
  column-gap: 0;
  //column-fill: balance;
  //column-span: none;
}
.ej1>*{background: lime;}
.ej2{
  background:lime;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ej3>*{
  border:1px solid red;
}



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