I've been exploring this area and came across some helpful answers, but I'm still having trouble figuring it out. My goal is to create something similar to what's shown in this image.
I want to have 5 small images, each with a number above them. I attempted it, but as you can see, the numbers were not centered (only testing the first row).
.grid-img {
display: inline-block;
}<div class="grid-img">
<p>1</p>
<img src="img1" alt="image1">
</div>
<div class="grid-img">
<p>2</p>
<img src="img2" alt="image2">
</div>
<div class="grid-img">
<p>3</p>
<img src="img3" alt="image3">
</div