Не могу получить ту же высоту img в макете сетки

Question

Так что я использую сетку для отображения 4 картинок.Дело в том, что я не могу получить изображения во втором ряду одинаковой высоты:

Мой HTML-код:

<section id="gallery">
    <h2>Gallery</h2>
    <div id="img-container">
        <img src="img/business1.jpg" alt="">
        <img src="img/business2.jpg" alt="">
        <img src="img/business4.jpg" alt="">
        <img src="img/business5.jpg" alt="">
    </div>
</section>

и мой CSS:

#gallery #img-container {
    padding:20px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}

#gallery img {
    width: 100%;
    object-fit: cover;
}

#gallery #img-container img:first-child {
    grid-column: 1 / 4;
}

Answer 1

Я понял, используйте max-content (таким образом, максимальная высота трех изображений) для высоты строки больших пальцев и align-self: stretch для изображений, чтобы они не уважали соотношение сторон:

#gallery #img-container {
    padding:20px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto max-content;
}

#gallery img {
    width: 100%;
    object-fit: cover;
    align-self: stretch;
}

https://codepen.io/anon/pen/mvNyJG

Answer 2

Добавьте 'height = "100%" для 3-го и 4-го изображения:

<section id="gallery">
    <h2>Gallery</h2>
    <div id="img-container">
        <img src="img/business1.jpg" alt="">
        <img src="img/business2.jpg" alt="">
        <img src="img/business4.jpg" alt="" height="100%">
        <img src="img/business5.jpg" alt="" height="100%">
    </div>
</section>