Галерея изображений показывает странное поведение?

Question

Я пытаюсь создать галерею изображений, но она показывает странное поведение.В моем случае первая строка заполняется 3 изображениями, но во второй строке пропускаются 2 столбца, а один заполняется изображением и совпадает с 3-й строкой.

HTML код:

<div class="container gallery-container">
    <p class="page-description text-center">Snaps by attendies</p>
    <div class="tz-gallery">
        <div class="row">
            <?php if($images): ?>
            <?php foreach($images as $Image) : ?>    
                <div class="col-sm-6 col-md-4">
                    <a class="lightbox" href="<?php echo Image['path'];?>">
                        <img src="<?php echo Image['path'];?>" alt="Benches">
                    </a>
                    <p><?php echo Image['description']; ?></p>    
                </div>
            <?php endforeach; ?>
            <?php else: ?>
                No images yet uploaded!
            <?php endif; ?>
        </div>    
    </div>    
</div>

Answer 1

высота изображения

                <img class="card-img-top" src="<?php echo $Image['path']; ?>" style="height: 300px;" alt="Card image cap"> </a>

Answer 2

Если вы используете bootstrap , попробуйте этот код:

<div class="container">
    <div class="card-columns">
        <?php if(isset($images)) { ?>
            <?php foreach($images as $Image) { ?>
            <div class="card">
                <a href="<?php echo $Image['path'];?>">
                    <img class="card-img-top" src="<?php echo $Image['path']; ?>" alt="Card image cap">
                </a>
                <div class="card-body">
                    <h5 class="card-title"><?php echo $Image['description']; ?></h5>
                </div>
            </div>
            <?php } ?>
        <?php } else { ?>
            No images yet uploaded!
        <?php } ?>
    </div>
</div>