Адаптивная CSS сетка без медиа-запросов? - PullRequest
Новая
       45

Адаптивная CSS сетка без медиа-запросов?

0 голосов
/ 11 июля 2020

Я пытаюсь создать адаптивную сетку для изображений. Похоже, что CSS Grid позволит мне создавать больше настраиваемых макетов, чем Flexbox, но у меня возникают проблемы с получением адаптивного дизайна. Я хотел бы, чтобы сетка была go для макета с одним столбцом, как только будет достигнуто условие minmax (300px, 1fr). К сожалению, похоже, что изображение не оборачивается, а сбегает за край контейнера. Возможно, я думаю об этом как о flexbox, а может мне что-то не хватает?

Вот мой: 

 .aht_grid_gallery {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-gap: 1.5vw;
}

.aht_two_vertical.grid_item_1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}

.aht_two_vertical.grid_item_2 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}
.aht_two_vertical.grid_item_3 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

.aht_gallery_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

И мой html: 

<div class="aht_grid_gallery">
        <div class="aht_two_vertical grid_item_1"><img class="aht_gallery_img" src="http://dev1.historyshuttle.com/wp-content/uploads/2020/07/img_4103.jpg" alt="W3Schools.com"></div>

       <div class="aht_two_vertical grid_item_2"><img class="aht_gallery_img" src="http://dev1.historyshuttle.com/wp-content/uploads/2020/07/img_4079-scaled-scaled.jpg" alt="W3Schools.com"></div>

       <div class="aht_two_vertical grid_item_3"><img class="aht_gallery_img" src="http://dev1.historyshuttle.com/wp-content/uploads/2020/07/img_4079-scaled-scaled.jpg" alt="W3Schools.com"></div>
   
</div>
...