Одинаковая высота блока grid при разных высот rows

Question

Всем привет, ребята. Сейчас у блоков (.item1) такая высота grid-template-rows: 1fr 98px 36px. Как мне сделать так, чтобы у всех блоков (.item1) была одинаковая высота. То есть когда у первой строки текст в две строчки, то менялось только высота изображения, а все остальное было фактическим, что-то похоже, когда указываешь ширину в процентах (100%) а менялось только высота изображения, то есть, второй строки? Все обшустрил, но ничего не нашел. Помогите ребята

    .item_2{
        background-color: red;
    }

    .item_3{
        background-color: #b9f;
    }

    .item_4{
        background-color: orange;
    }

    .item1{
        display: grid;
        grid-gap: 1px;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 98px 36px;
    }

.grid{
  grid-gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 125px));
  display: grid;
}

<div class="grid">
    <div class="item1">
        <div class="item_2">Названиие Название Название Название Название</div>
        <div class="item_3"><img src="">Изображение</div>
        <div class="item_4">Текст</div>
    </div>

    <div class="item1">
        <div class="item_2">Названиие</div>
        <div class="item_3"><img src="">Изображение</div>
        <div class="item_4">Текст</div>
    </div>

    <div class="item1">
        <div class="item_2">Названиие</div>
        <div class="item_3"><img src="">Изображение</div>
        <div class="item_4">Текст</div>
    </div>
  
  <div class="item1">
        <div class="item_2">Названиие</div>
        <div class="item_3"><img src="">Изображение</div>
        <div class="item_4">Текст</div>
    </div>
</div>

Answer 1

Надо для .item1 сделать grid-template-rows: auto 1fr 36px

.item_2 {
  background-color: red;
}

.item_3 {
  background-color: #b9f;
}

.item_4 {
  background-color: orange;
}

.item1 {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr 36px; /*здесь*/
}

.grid {
  width: 604px;
  grid-gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 125px));
  grid-auto-rows: 1fr;
  display: grid;
}

<div class="grid">
    <div class="item1">
        <div class="item_2">Названиие Название Название Название Название Название Название Название</div>
        <div class="item_3"><img src="">Изображение</div>
        <div class="item_4">Текст</div>
    </div>

    <div class="item1">
        <div class="item_2">Названиие</div>
        <div class="item_3"><img src="">Изображение</div>
        <div class="item_4">Текст</div>
    </div>

    <div class="item1">
        <div class="item_2">Названиие</div>
        <div class="item_3"><img src="">Изображение</div>
        <div class="item_4">Текст</div>
    </div>
  
  <div class="item1">
        <div class="item_2">Названиие</div>
        <div class="item_3"><img src="">Изображение</div>
        <div class="item_4">Текст</div>
    </div>
   <div class="item1">
        <div class="item_2">Названиие</div>
        <div class="item_3"><img src="">Изображение</div>
        <div class="item_4">Текст</div>
    </div>
   <div class="item1">
        <div class="item_2">Названиие</div>
        <div class="item_3"><img src="">Изображение</div>
        <div class="item_4">Текст</div>
    </div>
</div>

БЛОГ НА HUSL

Одинаковая высота блока grid при разных высот rows

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