@ArmyDone

Как правильно расположить элементы с помощью grid?

У меня есть контейнер в котором расположены 4 изображения, сделал их через grid, они должны быть одной ширины и высоты. Все работает, кроме высоты, у изображений снизу появляются отступы.
Изображение
61ad9f78888d7055873099.jpeg

html
<div class="history__gallery history-gallery">
       <div class="history-gallery__img">
              <img src="/images/kinoLogin.jpg" alt="">
       </div>
       <div class="history-gallery__img">
               <img src="/images/Desert.jpg" alt="">
       </div>
       <div class="history-gallery__img">
              <img src="/images/bgLogin.jpg" alt="">
       </div>
       <div class="history-gallery__img">
              <img src="/images/bg.jpg" alt="">
        </div>
</div>

CSS
.history__gallery{
    display: grid;
    grid-column-gap: 45px;
    grid-row-gap: 50px;
    grid-template-columns: repeat(2,1fr);
    margin-right: 75px;
}
.history-gallery__img{
    width: 458px;
    height: 476px;
}
.history__gallery img{
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
  • Вопрос задан
  • 72 просмотра
Пригласить эксперта
Ответы на вопрос 2
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Похоже, что у вас где-то задана фиксированная высота для внешнего div'а. При этом высота ячеек сетки стала больше высоты картинок. Отсюда и пустые места.
Ответ написан
AlekSays
@AlekSays
FrontEnd developer
Отступы образуются из-за фиксированных значений для .history-gallery__img. Ячейки грида шириной 1fr - это относительная единица измерения.
Решение будет зависеть от того, чего Вы хотите добиться:
- адаптивных изображений?
- фиксированных изображений? (имеет смысл если контейнер с контентом имеет фиксированную ширину)

На всякий случай вот стили для адаптивных изображений.
.history__gallery{
    display: grid;
    grid-column-gap: 45px;
    grid-row-gap: 50px;
    grid-template-columns: repeat(2,1fr);
    margin-right: 75px;
}

.history__gallery img{
    max-width: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
}

Размер изображений будет зависеть от ширины грид-контейнера. Если Вы верстаете с макета, то стоит знать, что не все дизайнеры учитывают различные размеры при различных разрешениях экрана и соответственно в реальной верстке многие элементы будут иметь отличные от макета размеры, особенно если используются относительные единицы измерения такие как %, fractions (fr) и т.д.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы