@Overlord934

Как сделать чтоб изображения в grid сетке уменьшались в размерах при сужении?

64c0d63aa6568352197225.png
Нужно чтоб вот эти элементы галереи уменьшались в размерах пропорционально. Какие свойства можно добавить в код?
HTML
<section class="gallery">
        <div class="container">
            <div class="gallery__inner">
                <div class="gallery__item gallery__item-1">
                    <img src="images/gallery-img-1.png" alt="">
                </div>
                <div class="gallery__item gallery__item-2">
                    <img src="images/gallery-img-2.png" alt="">
                </div>
                <div class="gallery__item gallery__item-3">
                    <img src="images/gallery-img-3.png" alt="">
                </div>
                <div class="gallery__item gallery__item-4">
                    <img src="images/gallery-img-4.png" alt="">
                </div>
                <div class="gallery__item gallery__item-5">
                    <img src="images/gallery-img-5.png" alt="">
                </div>
                <div class="gallery__item gallery__item-6">
                    <img src="images/gallery-img-6.png" alt="">
                </div>
                <div class="gallery__item gallery__item-7">
                    <img src="images/gallery-img-7.png" alt="">
                </div>
                <div class="gallery__item gallery__item-8">
                    <img src="images/gallery-img-8.png" alt="">
                </div>
                <div class="gallery__item gallery__item-9">
                    <img src="images/gallery-img-9.png" alt="">
                </div>
                <div class="gallery__item gallery__item-10">
                    <img src="images/gallery-img-10.png" alt="">
                </div>
                <div class="gallery__item gallery__item-11">
                    <img src="images/gallery-img-11.png" alt="">
                </div>
                <div class="gallery__item gallery__item-12">
                    <img src="images/gallery-img-12.png" alt="">
                </div>
                <div class="gallery__item gallery__item-13">
                    <img src="images/gallery-img-13.png" alt="">
                </div>
                
                
            </div>
        </div>
    </section>


CSS
.gallery__inner {
    display: grid;
    grid-template-columns: 443px 197px 328px 328px 407px;
    grid-template-rows: 408px 141px 188px 196px 252px;
    column-gap: 10px;
}

.gallery__item img {
    
}

.gallery__item-1 {
    grid-column-start: 1;
    grid-row-start: span 2;
    

}

.gallery__item-2 {
    grid-column-start: 2;
    grid-row-start: 1;
    
}

.gallery__item-3 {
    grid-column-start: 3;
    grid-row-start: 1;
    
}

.gallery__item-4 {
    grid-column-start: 4;
    grid-row-start: 1;
    
}

.gallery__item-5 {
    grid-column-start: 5;
    grid-row-start: span 2;
    
}

.gallery__item-6 {
    grid-column-start: 1;
    grid-row-start: 3;
    grid-row-end: 4;
    margin-top: 20px;
    
}

.gallery__item-7 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    margin-top: 3px;
    margin-left: 20px;
    
}

.gallery__item-8 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    margin-left: 145px;
    margin-top: 17px;
    
}

.gallery__item-9 {
    grid-column-start: 5;
    grid-row-start: 3;
    grid-row-end: 4;
    margin-top: 135px;
   
}

.gallery__item-10 {
    grid-column-start: 1;
    grid-row-start: 4;
    grid-row-end: 5;
    margin-top: 143px;
    
}

.gallery__item-11 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    margin-top: 70px;
    
}

.gallery__item-12 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5;
    margin-left: 210px;
    margin-top: 25px;
    
}

.gallery__item-13 {
    grid-column-start: 5;
    grid-row-start: 4;
    grid-row-end: 5;
    margin-top: 210px;
    
}
  • Вопрос задан
  • 504 просмотра
Пригласить эксперта
Ответы на вопрос 1
dicem
@dicem
ширину грид элементов указывай в fr или % ,
на картинки делай object-fit: cover
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы