JSFiddle - React, Tailwind, and code Playground
HTML
<div class="square-grid">
<div class="sg-3">
<div>
<div class="sg-3">
<div>
<div class="sg-3"><div>1</div></div>
<div class="sg-3"><div>2</div></div>
<div class="sg-3"><div>3</div></div>
<div class="sg-3"><div>4</div></div>
<div class="sg-3"><div>5</div></div>
<div class="sg-3"><div>6</div></div>
<div class="sg-3"><div>7</div></div>
<div class="sg-3"><div>8</div></div>
<div class="sg-3"><div>9</div></div>
</div>
</div>
<div class="sg-3">
<div>
<div class="sg-3"><div>1</div></div>
<div class="sg-3"><div>2</div></div>
<div class="sg-3"><div>3</div></div>
<div class="sg-3"><div>4</div></div>
<div class="sg-3"><div>5</div></div>
<div class="sg-3"><div>6</div></div>
<div class="sg-3"><div>7</div></div>
<div class="sg-3"><div>8</div></div>
<div class="sg-3"><div>9</div></div>
</div>
</div>
<div class="sg-3">
<div>
<div class="sg-3"><div>1</div></div>
<div class="sg-3"><div>2</div></div>
<div class="sg-3"><div>3</div></div>
<div class="sg-3"><div>4</div></div>
<div class="sg-3"><div>5</div></div>
<div class="sg-3"><div>6</div></div>
<div class="sg-3"><div>7</div></div>
<div class="sg-3"><div>8</div></div>
<div class="sg-3"><div>9</div></div>
</div>
</div>
<div class="sg-3">
<div>
<div class="sg-3"><div>1</div></div>
...
CSS
body {
text-align: center;
}
.square-grid {
position: relative;
}
.sg-3 {
float: left;
width: 33.3333%;
position: relative;
height: 0;
padding-top: 33%;
position: relative;
outline: 1px solid black;
}
.sg-3 > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}