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

Question

[ArmyDone]

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

Изображение

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;
}

Comments

[Ankhena]

Это ваш код в песочнице и картинки специально разных пропорций https://jsfiddle.net/jton2yw5/
И в нем нет отступов внизу.

А значит, нужно сделать песочницу так, чтобы ваша проблема была видна.

Возможно, вам поможет разобраться самостоятельно вот такое правило:

.history-gallery__img{
    border: 1px solid red;
}

Answer 1

[Rsa97]

Похоже, что у вас где-то задана фиксированная высота для внешнего div'а. При этом высота ячеек сетки стала больше высоты картинок. Отсюда и пустые места.

Comments

[Pavel-ww]

Да, согласен.
Если у родителя должна быть какая то высота, то добавьте grid-auto-rows: 476px; в .history__gallery или назначьте явную сетку для строк

Answer 2

[Alexey Levicky]

Отступы образуются из-за фиксированных значений для .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) и т.д.