Как выровнять по высоте заголовки в карточках товаров?

Question

[coderoar]

Нужна помощь, как можно реализовать выравнивание высоты заголовков с помощью CSS/SCSS при условии что в каких-то заголовках может быть блок с информации "в наличии:" в каких-то карточках их не будет, так же, некоторые заголовки на мобильных устройствах будут в три строки?



Вот реализация через js

const elementsSentenceCard = document.querySelectorAll('.sentence-card__info');
let maxHeight = 0;
elementsSentenceCard.forEach(element => {
  const elementHeight = element.offsetHeight;
  maxHeight = Math.max(maxHeight, elementHeight);
});

elementsSentenceCard.forEach(element =>  element.style.height = `${maxHeight}px`);

Comments

[Евгений Косухин]

По идее флексбокс тут должен справляться.
я бы сделал так
контейнер карточки товара - display: flex
Нижняя часть карточки то что под названием (размеры) - margin-top: auto
И чтобы сами карточки в строке по высоте сравнивались через
align-items: stretch;

И вроде всё, карточки в строке будут одной высоты, блок с названием будет одной высоты.
только блок с размерами должен быть строго определенной высоты всегда например 100px

[coderoar]

Евгений Косухин, так уже делал, летят фильтры

[imko]

subgrid если поддержка позволяет, а так скриптом, либо редизайн)

[xdevelx]

Элементы карточек одинаковой высоты?

Answer 1

[Виталий Першин]

Если нижняя часть одинакового размера, то можно её отодвинуть при помощи flexbox



Есть еще subgrid, но поддержка пока слабая

Answer 2

[Виктор Кожухарь]

В карточке элементы flex выравниваем книзу. Однако при помощи "магического" margin-bottom выравниваем изображение и заголовок против основного выравнивания контента, а именно кверху. Таким образом часть элементов карточки льнёт кверху, а часть книзу. Между ними будет свободное место. В результате мы получаем необходимый результат - иллюзию одинаковой высоты заголовков.



Саму сетку карточек выровняете сами, я не заморачивался, сосредоточившись только на самой карточке

Answer 3

[Михаил Р.]

как можно реализовать выравнивание высоты заголовков с помощью CSS/SCSS

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