Как сделать одинаковую высоту содержимого блоков без конкретных значений с помощью grid`ов?

Question

Всем привет, начал изучать гриды и решил сделать задание из макета в фигме для саморазвития, вопрос в следующем, есть такая секция .

Начал ее верстать и решил сделать больше текста в тайтлах и описании, да и картинки по высоте все разных размеров, вот и в чем собственно вопрос, у меня получилось следующее

Видно что title, описание и текст занимают только нужное для них место, нужно сделать так чтобы высота блока с картинкой бралась от самой высокой картинки, ну и соответственно прижималась к низу, ну это я сделал через align-self: end; для картинки. Title нужно чтобы так же брал высоту от самого большого блока в строке ну и текст соответственно тоже. Если бы мне нужно было установить высоту для какого-то одного блока, я мог бы это сделать с помощью flexbox'а, с помощью свойства для блока flex-grow: 1; но тут нужно для всех блоков сделать динамически изменяемую высоту. Грубо говоря чтобы все блоки находились на одном уровне.

Пробовал для блока задавать grid-auto-rows: minmax(50px, auto); как и для wrappera, не увенчалось это успехом.

Для наглядности добавлю картинку что именно нужно, мало ли объяснил криво.

На ней желтые прямоугольники это картинки, зеленые тайтлы, синие текст, красные это блоки которые должны динамически подстраиваться под высоту самого высокого элемента.

И еще микро вопросик центральный блок в строке я собираюсь смещать с помощью марджинов или трансформа, верно ли это или лучше с помощью гридов это сделать, если с помощью гридов то какое свойство за это отвечает?

.container {
    width: 100%;
    max-width: 1200px;
    padding: 0 30px;
    margin: 0 auto;
}

.benefictsgrid {
    padding: 100px 0;
}

.benefictsgrid__wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
/*    grid-auto-rows: minmax(50px, auto);*/

}

.benefictsgrid__block {
    display: grid;
    justify-items: center;
    align-content: flex-start;
}

.midle {

}

.benefictsgrid__img {
    align-self: end;
}

.benefictsgrid__blocktitle {

    margin: 8px 0 14px;
    text-align: center;
}

.benefictsgrid__blocktext {
    text-align: center;
    max-width: 322px;

}

<section class="benefictsgrid">
        <div class="container">
            <div class="benefictsgrid__wrapper">
                <div class="benefictsgrid__block">
                    <img src="./img/beneficts_img1.png" alt="" class="benefictsgrid__img">
                    <h2 class="benefictsgrid__blocktitle second__font">
                        Экономия<br>на хранилище хранилище хранилище
                    </h2>
                    <p class="benefictsgrid__blocktext">
                        за счёт собственных цистерн на нашей базе
                    </p>
                </div>

                <div class="benefictsgrid__block midle">
                    <img src="./img/beneficts_img2.png" alt="" class="benefictsgrid__img">
                    <h2 class="benefictsgrid__blocktitle second__font">
                        Экономия<br>на транспорте
                    </h2>
                    <p class="benefictsgrid__blocktext">
                        более 10 собственный газовозов
                    </p>
                </div>

                <div class="benefictsgrid__block">
                    <img src="./img/beneficts_img3.png" alt="" class="benefictsgrid__img">
                    <h2 class="benefictsgrid__blocktitle second__font">
                        Поставки напрямую<br>от производителей
                    </h2>
                    <p class="benefictsgrid__blocktext">
                        нет наценки на стоимость газа как у перекупщиков и небольших частных компанийнет наценки на стоимость газа как у перекупщиков и небольших частных компанийнет наценки на стоимость газа как у перекупщиков и небольших частных компанийнет наценки на стоимость газа как у перекупщиков и небольших частных компанийнет наценки на стоимость газа как у перекупщиков и небольших частных компаний
                    </p>
                </div>

            </div>
        </div>
    </section>

БЛОГ НА HUSL

Как сделать одинаковую высоту содержимого блоков без конкретных значений с помощью grid`ов?

Ответы (0 шт):