HTML CSS Use wrapper to add caption to image gallery

Question

I have a very simple image gallery.

The height of the images is controlled by a div call 'row'. I would like to add a unique caption below each of the images.

The caption should be the same width as the image it relates to (the image width changes according to the screen ratio and size).

This seems so infuriatingly simple, but I just can't work it out. Thanks in advance.

Here's what I have...

https://codepen.io/GBol/pen/yLRMOdY

.row {
  width: 100%;
  aspect-ratio: 11 / 2;
  display: block;
  border: solid purple;
}

.pic {
  height: 90%;
  float: left;
  margin: 0% 1% 0% 0%;
  display: block;
  border: solid red;
}

.caption {
  display: block;
  font-size: 10pt;
  width: 100%;
  border: solid blue;
}

<div class="row">
  <a href="http://placekitten.com/500/600">
    <img class="pic" src="http://placekitten.com/500/600" />
  </a>
  <a href="http://placekitten.com/300/600">
    <img class="pic" src="http://placekitten.com/300/600" />
  </a>
  <a href="http://placekitten.com/400/600">
    <img class="pic" src="http://placekitten.com/400/600" />
  </a>
</div>

<div class="caption">
  Caption Example
</div>

I tried using another div as a wrapper to join the images and the caption, but can't get this to work correctly.

Answer 1

It can be done using simple display flex containers and row-column flex direction.

I have added codepen solution here https://codepen.io/abhijeetabnave/pen/xxyqOoy

.row {
  width: 100%;
  height: 200px;
  aspect-ratio: 11 / 2;
  display: flex;
  flex-direction: row;
  border: solid purple;
  justify-content: space-evenly;
}

.pic {
  height: 90%;
  float: left;
  margin: 0% 1% 0% 0%;
  display: block;
  border: solid red;
}

.caption {
  display: block;
  font-size: 10pt;
  width: 100%;
  border: solid blue;
}

.image-container {
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="row">
  <a href="http://placekitten.com/500/600">
    <div class="image-container" ><img class="pic" src="http://placekitten.com/500/600" />
      <span> 
       <div class="caption">
         Caption Example 1
       </div>
      </span>
    </div>
  </a>
  <a href="http://placekitten.com/300/600">
    <div class="image-container" ><img class="pic" src="http://placekitten.com/300/600" />
      <span>
        <div class="caption">
          Caption Example 2
        </div>
      </span>
    </div>
  </a>
  <a href="http://placekitten.com/400/600">
    <div class="image-container" ><img class="pic" src="http://placekitten.com/400/600" />
      <span>
        <div class="caption">
          Caption Example 3
        </div>
      </span>
    </div>
  </a>
</div>