Как увеличить высоту блока в Grid только на одной линии если один элемент больше либо равен другим?

Question

[Даниил Конев]

https://fabrika-kresel.site/ofisnye-kresla/

Сейчас у меня так :

.product-box .caption h4 {
    width: 99%;
    margin-top: 7px;
    margin-bottom: -7px;
    min-height: 25px;
    max-height: 120px;
}

Изначально было так: min-height: 45px; В этом случае блоки одинаковые. В зависимости от текста, автоматически ставятся все по высоте, но там где названия короткие получается небольшое разрыв, которые бы хотелось убрать.

Задача такая:
если на линии одинаковые короткие названия то: min-height: 25px;
если название большое, то : min-height: 45px;

Собственно пока из идей использовать jquery. Есть возможное решение на css или только js?

Answer 1

[artem rodionov]

В CSS Grid можно увеличить высоту блока только на одной линии, если один элемент больше или равен другим, используя свойство `grid-row-end`. Вы можете задать значение `span` для свойства `grid-row-end`, чтобы указать, сколько строк должен занимать элемент.

Вот пример:

HTML:
```html

Элемент 1
Элемент 2
Элемент 3

```

CSS:
```css
.grid-container {
display: grid;
grid-template-columns: 1fr; /* Одинаковая ширина для всех элементов */
grid-auto-rows: 50px; /* Высота строк */
grid-gap: 10px; /* Промежуток между элементами */
}

.item {
background-color: #ccc;
padding: 10px;
}

.item:nth-child(2) {
grid-row-end: span 2; /* Увеличиваем высоту на 2 строки */
}
```

В этом примере, второй элемент `.item:nth-child(2)` будет занимать две строки вместо одной, если он больше или равен другим элементам. Вы можете изменить значение `span` на количество строк, которое вам нужно.

Обратите внимание, что это пример CSS Grid с фиксированной высотой строк. Если вам нужно динамически изменять высоту строк в зависимости от содержимого, вам может потребоваться использовать JavaScript или другие CSS-свойства, такие как `grid-template-rows: auto` или `grid-template-rows: minmax(min-content, max-content)`.