Как сделать адаптивный макет галереи в начальной загрузке?

Question

Я сделал галерею, но как только я изменил размер окна, изображения начали складываться.Как сделать так, чтобы макет оставался одинаковым для каждого размера экрана?

<div class="container"> 
    <div class="gallery">
        <a href="images/tepihg1.jpg" data-lightbox="mygallery" data-title="Tepih1"> <img src="images/tepihg1.jpg" class="img-fluid"> </a>
        <a href="images/tepihg2.jpg" data-lightbox="mygallery" data-title="Tepih2"> <img src="images/tepihg2.jpg" class="img-fluid"> </a>
        <a href="images/tepihg3.jpg" data-lightbox="mygallery" data-title="Tepih3"> <img src="images/tepihg3.jpg" class="img-fluid"> </a>
    </div>
</div>

<style>
.gallery {
    margin: 30px 0 50px;

}
.gallery img {
    max-width: 200px; 
    height: 200px;
    object-fit: cover;
    padding: 5px;
}

.gallery img:hover{
    transform: scale(1.1);
}
</style>

Answer 1

Вы можете изменить .gallery img CSS.Если вы собираетесь показать только 3 изображения.Максимальная ширина должна составлять 33,33% минус отступы.Проверьте этот фрагмент.

<div class="container"> 
    <div class="gallery">
        <a href="images/tepihg1.jpg" data-lightbox="mygallery" data-title="Tepih1"> <img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" class="img-fluid"> </a>
        <a href="images/tepihg2.jpg" data-lightbox="mygallery" data-title="Tepih2"> <img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" class="img-fluid"> </a>
        <a href="images/tepihg3.jpg" data-lightbox="mygallery" data-title="Tepih3"> <img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" class="img-fluid"> </a>
    </div>
</div>

<style>
.gallery {
    margin: 30px 0 50px;

}
.gallery img {
    max-width: calc(33.3333% - 20px);
    object-fit: cover;
    padding: 5px;
}

.gallery img:hover{
    transform: scale(1.1);
}
</style>