Display Gallery Grid View for Advanced Custom Fields Wordpress - php

Question

I have created a gallery field group in ACF as seen in the image below.
To display this on my wordpress page I have added the following code to the php file.
<?php
$images = get_field('employee_testimonial_gallery');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
<p><?php echo $image['caption']; ?></p>
</li>
<?php endforeach; ?>
</ul>
However the end result is displaying as a list
and I need the images to display as a grid like below
I've read all the documentation on ACF and it seems to be a general issue. TIA.

Answer 1

Add the following css to list it as like grid. Before start just add a class to your output html markup.
<ul class="gal-grid">
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
<p><?php echo $image['caption']; ?></p>
</li>
<?php endforeach; ?>
</ul>
Then after this markup changes apply bellow css,
ul.gal-grid li{
display: inline-block;
float: left;
margin: 0 10px 0 0;
}
ul.gal-grid li:last-child{
margin-right: 0 !important;
}