Как выровнять текст по одному уровню?

Question

[webl2m]

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

Comments

[Ivan Ustûžanin]

смотреть на subgrid

[DIVSIDE]

Кто мешает сделать на гридах или задать заголовкам минимальную высоту?

[webl2m]

DIVSIDE, минимальная высота это не универсально. А на гридах не очень понимаю как выровнять так

[DIVSIDE]

webl2m, в каждом элементе делай 1 колонку и 3 строки

[DIVSIDE]

webl2m, а универсально и не будет. В любом случае где-то надо будет делать ограничение. Не в заголовке, так в высоте карточки. Не у карточки, так у подзаголовка

[szQocks]

webl2m, если у заголовка будет фиксированная высота + блок с тектом будет занимать всю оставшуюся высоту и текст прижать кверху то он будет везде ровно

но может и ещё проще варианты есть, лень думать

Answer 1

[jijek-com]

можно с помощью js )

js ->
const updateTitlesHeight = () => {
const allTitles = document.querySelectorAll('.programs__title');

let maxHeight = 0;
allTitles.forEach(title => {
maxHeight = Math.max(maxHeight, title.offsetHeight);
});
allTitles.forEach(title => {
title.style.height = maxHeight + 'px';
});
};

document.addEventListener("DOMContentLoaded", updateTitlesHeight);
window.addEventListener('resize', updateTitlesHeight);

css ->
.programs__descr {
margin: 0 0 17px;
}

Comments

[DIVSIDE]

Делать в js то, что делается одной строкой css. Мда

Answer 2

[copyhold]

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

да, задайте высоту заголовку - 3lh. текст не надо центровать

можно еще попробовать сабгрид,