Image Tile Using CSS Grid - css

Question

I'm trying to create a 2 x 2 image tile using css grid. I'm want to make this dynamic so that no matter how many images are provided (between 1 and 4), the full space of the tile is used. So like this:
Ive got this kinda working with the following css and markup.
CSS
.container {
display: flex;
}
.container .grid-tiles {
margin-right: 20px;
}
.grid-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, 38px);
grid-column-gap: 4px;
grid-row-gap: 4px;
width: 80px;
height: 80px;
}
.grid-tiles .grid-tile {
border-radius: 3px;
background-color: red;
}
/* Only one */
.grid-tile:only-child {
grid-area: 2 span / 2 span;
}
/* Three */
.grid-tile:first-child:nth-last-child(3) {
grid-area: 2 span;
}
HTML
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
But in some cases there needs to be text in a tile. When that happens the grid doesn't follow the sizing of the other instances:
I need the grid to be consistent. Anyone able to offer some help on how to ensure this / improvements to the grid properties? Thanks!
I've a Codepen of the current working.

Answer 1

Force all the columns/rows to be equal in size by using
grid-template-columns: 1fr 1fr; /* two equal columns */
grid-auto-rows: 1fr; /* all the rows equal */
Full code
.container {
display: flex;
}
.container .grid-tiles {
margin-right: 20px;
}
.grid-tiles {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
gap: 4px;
width: 80px;
height: 80px;
}
.grid-tiles .grid-tile {
border-radius: 3px;
background-color: red;
}
/* Only one */
.grid-tile:only-child {
grid-area: span 2 / span 2;
}
/* Three */
.grid-tile:first-child:nth-last-child(3) {
grid-area: span 2;
}
<div class="container">
<div class="grid-tiles">
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile">Zaa</div>
</div>
</div>