0

Всем привет, ребята. Сейчас у блоков (.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>

1 ответ 1

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>

3
  • Привет. Спасибо за решение, НО есть проблема. Когда блоков уже 6 и .grid 604px ширина, то верстка слетает и "нижние" блоки не той высоты, как первые. codepen.io/kekoklol/pen/MWrydVM
    – Lememlol
    20 мар 2022 в 13:12
  • Задайте grid-auto-rows: 1fr для .grid. Добавил в ответ.
    – xydope
    20 мар 2022 в 13:31
  • спасибо большое! Очень полезный ответ
    – Lememlol
    20 мар 2022 в 13:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.