Distribute Figures Horizontally - html

Question

figure {
display: grid;
padding: 5px;
float: left;
background-color: #fff;
font-size: .875em;
}
figure img {
display: block;
max-width: 100%;
}
figcaption {
display: table-caption;
caption-side: bottom;
text-align: center;
padding: 0 5px 5px;
}
<figure>
<figcaption>Video</figcaption>
<img src=http://wordpress.local/wp-content/uploads/Thumbnail_2.png">
<figcaption>PDF</figcaption>
</figure>
Hi I'm having some issues with distributing images horizontally. The Code above results in this:
I Would like to make it distribute the images horizontally like img1 caption1 | img2 caption2 | img3 caption3
If possible I'd like it to be a grid thats 3 across and as deep as required, as the number of images could vary.
I am editing this in a beaver builder html module in wordpress.
Thanks for the help :)

Answer 1

I ended up figuring it out :)
<figure class="item">
[acf_repeater field="linked_gallery" sub_fields="external_link,cover_image,file_type"]
<div class="wrap">
[generate_image picture_url="%cover_image%" external_url ="%external_link%" file_type = "%file_type%" ]
<figcaption class="caption">%file_type%</figcaption>
</div>
[/acf_repeater]
</figure>
.item {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
float: left;
}
.caption {
/*display: inline-block;*/
caption-side: bottom;
}
.img {
display: block;
max-width: 100%;
}
.wrap{
text-align: center;
}