Можно ли подогнать высоту заголовков в карточках, в зависимости от числа строк?

Question

[lagudal]

Пример -


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

Comments

[Ankhena]

Subgrid
либо JS

Answer 1

[Khetag_d]

Да, это возможно сделать с помощью CSS и JavaScript. Основная идея заключается в том, чтобы динамически вычислять высоту самого высокого заголовка в ряду и применять эту высоту ко всем заголовкам в этом ряду.

Допустим так
Вот HTML

<div class="card-row">
    <div class="card">
        <h3 class="card-title">Однострочный заголовок</h3>
        <p>Описание карточки</p>
    </div>
    <div class="card">
        <h3 class="card-title">Многострочный заголовок, который занимает больше места</h3>
        <p>Описание карточки</p>
    </div>
    <div class="card">
        <h3 class="card-title">Ещё один однострочный заголовок</h3>
        <p>Описание карточки</p>
    </div>
</div>

Вот CSS

.card-row {
    display: flex;
    gap: 16px; /* Отступ между карточками */
}

.card {
    border: 1px solid #ccc;
    padding: 16px;
    flex: 1;
}

.card-title {
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1.5;
}

Вот JS

function adjustCardTitlesHeight() {
    const rows = document.querySelectorAll('.card-row');

    rows.forEach(row => {
        const titles = row.querySelectorAll('.card-title'); 
        let maxHeight = 0;

        titles.forEach(title => {
            title.style.height = 'auto';
            const titleHeight = title.offsetHeight;
            if (titleHeight > maxHeight) {
                maxHeight = titleHeight;
            }
        });

        titles.forEach(title => {
            title.style.height = `${maxHeight}px`;
        });
    });
}
window.addEventListener('load', adjustCardTitlesHeight);
window.addEventListener('resize', adjustCardTitlesHeight);

Comments

[Ankhena]

https://caniuse.com/?search=subgrid Почти 92% на данный момент