Как сохранить высоту блока CSS равной при загрузке контента через фид JSON

Question

Я столкнулся с проблемой, связанной с большим количеством движущихся частей, и некоторое время колотил ею по стене.

Короче говоря, мне нужно перетащить данные JSON на страницу WordPress.(сделано, проблем нет) и отображать его в табличном формате блоков.Я прикрепил здесь макет изображения того, к чему я стремлюсь: https://i.imgur.com/HAaKPYj.jpg

Я дошел до того, что коробки отображаются правильно - по три в строке, хорошо упакованные и так далее.Единственное, что осталось, это то, что я не могу получить одинаковую высоту блоков в каждой строке.

Я знаю, что это можно сделать со строками и чем-то вроде Flexbox, но проблема в том, что яизвлекается из фида JSON и создает только элемент единственного цикла foreach.Я полностью согласен с повторным выполнением CSS полностью, если есть хороший подход к обработке, который дал бы коробки одинаковой высоты.

Грубо говоря, структура блока:

<div class="single-event">
    <img src="example.jpg">
    <div class="event-details">
        <div class="event-type">In-Person</div>
        <h3>Header</h3>
        <p>The excerpt/description pulled from the feed</p>
        <a href="#feed-url">&raquo;</a>
    </div><!-- end .event-details -->
</div><!-- end .single-event -->

Есть ли хитрый CSS-трюк, о котором я не подозреваю, чтобы сделать это, или было бы лучше использовать что-то вроде JavaScript для вставки строк flexbox каждые три элемента, и если да, то есть ли руководство о том, как начать решать это?

Заранее спасибо!

Answer 1

Один из способов - установить фиксированную высоту для всех ящиков с помощью CSS.

Или вы также можете сделать это через JS после загрузки всех ящиков следующим образом:

let biggestHeight = 0;

const boxes = document.querySelectorAll('.single-event')

// First loop throught the boxes to get the biggest height
boxes.forEach((box) => {
    const boxHeight = window.getComputedStyle(box).getPropertyValue('height')

  biggestHeight = boxHeight > biggestHeight ? boxHeight : biggestHeight
})

// Second loop throught the boxes to set the height
boxes.forEach((box) => {

  box.style.height = biggestHeight + 'px'

})