Diffrent width and height images layout question in Laravel with fancybox

Here is Photo viewer laravel project. it worked well. but I'm having problem about image layout. This below image is my current photo gallery page. As you can see images are not line. looks not good.

Becase each uploaded photo size are diffrent width and height so this happens I guess. I'm using Laravel. And this is fancybox. and I'm using this gentleman's source code. https://www.itsolutionstuff.com/post/laravel-5-image-gallery-crud-example-from-scratchexample.html

I had been changing below css parameter but I couldn't fix. Could you teach me code to fix situation please?

CSS of index.blade.php

   .gallery
    {
        display: inline-block;
        margin-top: 20px;      

    }   

    .form-image-upload{
        background: #e8e8e8 none repeat scroll 0 0;
        padding: 15px;

    }

Image output of Index.blade.php

<div class='list-group gallery'>
            @if($images->count())
                @foreach($images as $image)
                <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
                    <a class="thumbnail fancybox" rel="ligthbox" href="images/">
                        <img class="img-responsive" alt="" src="images/" />
                        <div class='text-center'>
                            <small class='text-muted'>No.</small>
                        </div> <!-- text-center / end -->
                    </a>                

                </div> <!-- col-6 / end -->
                @endforeach
            @endif
        </div> 

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3bNEs3r
via IFTTT