Есть: контейнер, внутри которого несколько карточек. Они отрисовываются в цикле, ширина у них адаптивная. Количество карточек в одной строке меняется в зависимости от экрана.
Надо: чтобы высота всей строки подстраивалась под высоту самой большой карточки. Например, в первую строку влезло три карточки, высота наибольшей - 300px, значит, две другие подстраиваются под неё. Если во второй строке наибольшая карточка - 400px, вторая строка будет этой высоты.
Сейчас у меня получается или менять высоту одной карточки, или сразу все. Пробовала высчитывать количество карточек в строке, делать массив из них и менять высоту для каждой,но это не учитывает адаптивность. Также пробовала менять цикл, чтобы он заданное количество карточек помещал в один контейнер, но и это не учитывает адаптив. Возможно, есть какой-то метод, который может определить количество элементов в строке в зависимости от ширины экрана?
Так что очень нужны свежие идеи, заранее спасибо :) Блок с карточками + есть старый код с jQuery, выравнивающий высоту всех карточек.
window.onload = function () {
$(window)
.on("resize", () => {
// Привести к одной высоте
var newsBlock = [];
var newsBlockMax = 0;
var newsLink = newsBlock;
var newsLinkMax = newsBlockMax;
$(".news-block").css("height", "auto");
$(".news-block__link").css("height", "auto");
$(".news-block").each(function (index) {
newsBlock[index] = $(this).height();
if (newsBlockMax < newsBlock[index]) {
newsBlockMax = newsBlock[index];
}
});
$(".news-block__link").each(function (index) {
newsLink[index] = $(this).outerHeight();
if (newsLinkMax < newsLink[index]) {
newsLinkMax = newsLink[index];
}
});
$(".news-block__link").outerHeight(newsLinkMax);
$(".news-block").css("padding-bottom", newsLinkMax + "px");
$(".news-block").height(newsBlockMax);
})
.resize();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="news-wrap fl">
<div class="news-block">
<div class="news-block__img">
<a href="/1289/9141/145/142/9216">
<img src="/103569847-320-213:g.jpeg" alt="" title="" />
</a>
</div>
<div class="news-block__desc">
<div class="news-block__desc-date">
<p>28 декабря 2022</p>
</div>
<div class="news-block__desc-title">
<a href="/1289/9141/145/142/9216"
>О встрече Руководителей и Секретариата ОДКБ</a
>
</div>
</div>
</div>
<div class="news-block">
<div class="news-block__img">
<a href="/1289/9141/145/142/9218">
<img src="/103569852-320-213:g.jpeg" alt="" title="" />
</a>
</div>
<div class="news-block__desc">
<div class="news-block__desc-date">
<p>21 декабря 2022</p>
</div>
<div class="news-block__desc-title">
<a href="/1289/9141/145/142/9218">Об участии в брифинге КТК СБ ООН</a>
</div>
</div>
</div>
<div class="news-block">
<div class="news-block__img">
<a href="/1289/9115/9116/9118/9222">
<img src="/103424764-320-213:g.jpeg" alt="" title="" />
</a>
</div>
<div class="news-block__desc">
<div class="news-block__desc-date">
<p>16 декабря 2022</p>
</div>
<div class="news-block__desc-title">
<a href="/1289/9115/9116/9118/9222"
>О заседании постоянно действующего совещания при Руководителе с
участием полномочных представителей государств Содружества</a
>
</div>
</div>
</div>
<div class="news-block">
<div class="news-block__img">
<a href="/1289/9141/9108/9142/9220">
<img src="/103569857-320-213:g.jpeg" alt="" title="" />
</a>
</div>
<div class="news-block__desc">
<div class="news-block__desc-date">
<p>13 декабря 2022</p>
</div>
<div class="news-block__desc-title">
<a href="/1289/9141/9108/9142/9220"
>Об участии в форуме по профилактике деструктивной деятельности в
молодежной среде</a
>
</div>
</div>
</div>
</div>