Как реализовать такой контейнер, как на фото?

Question

[EvolveSunVolt]

Нужно создать контейнер общий для всех элементов, при этом высоты элементов разные, в зависимости от длины текста.

Что я пробовал:

1) display: grid не помог, ведь он ведет себя, как строгая плитка

2) display: flex, flex-wrap: wrap, gap: 28px, тоже не помог, выглядит, как 1 вариант

3) пошел за display: block, column-count: 2, также дал детям контейнера слабительное, чтобы они высирали 28 пикселей под себя:) (margin-bottom: 28px;), вроде бы помогло, но другая проблема этого способа в том, что если кол-во элементов нечетное, то один из элементов будет делиться на 2, если четное, то все норм. Пока что записал этот способ, как негодный

Вопрос: как решить эту проблему?

Условия:
1) Общий родительский контейнер для все элементов отзыва должен быть один
2) У элементов разные высоты, в зависимости от длины текста
3) Отступы между элементами должны быть одинаковыми

Comments

[Алан Гибизов]

Если нет кода, не надо ставить тэг языка.

[EvolveSunVolt]

Алан Гибизов, так я тэг поставил, чтобы питонщики вроде вас, сходу понимали, что тут вопрос касаемо темы css и проходили мимо. Ну по крайней мере я думал, что это так работает, сорри, больше так не буду :)

[Алан Гибизов]

EvolveSunVolt, вы не понимаете, что такое тэг тут и как оно работает. На теги подписываются. Соответственно, вы ставите тэг python и спамите на 40 тыс. подписчиков тэга своей совершенно «левой» для них историей.
Когда вы регистрировались, вы ведь внимательно изучили Регламент? Ведь изучили, да?

[EvolveSunVolt]

Алан Гибизов,

function ответНаВопрос(вопрос) {
    // Уберем символы пунктуации из вопроса и приведем его к нижнему регистру для более точной проверки.
    const очищенныйВопрос = вопрос.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()?]/g, "").toLowerCase();

    // Список ключевых слов, которые часто встречаются в риторических вопросах.
    const ключевыеСлова = ["почему", "зачем", "как", "когда", "где", "разве", "неужели", "правда"];

    // Проверяем, начинается ли вопрос с одного из ключевых слов.
    for (const ключевоеСлово of ключевыеСлова) {
        if (очищенныйВопрос.startsWith(ключевоеСлово)) {
            return "да";
        }
    }

    // Если не найдено ключевых слов, считаем вопрос не риторическим.
    return "нет";
}

Answer 1

[Сергей delphinpro]

Популярный вопрос.
Ответ есть у меня:
https://yandex.ru/search/?text=masonry+layout

Comments

[EvolveSunVolt]

Я полагаю, что мы кроссбраузерность послали куда подальше?
Потому что

[Сергей delphinpro]

EvolveSunVolt, ну в выдаче же не только css решения. На данный момент это решается скриптами.

[EvolveSunVolt]

Сергей delphinpro, можно подробнее плиз? или примерчик со скриптами. я чет не могу придумать, что делать с js и зачем, чтобы присваивать стили или как?

[Сергей delphinpro]

EvolveSunVolt, первая ссылка в выдаче ведет на самое популярное решение такой раскладки https://masonry.desandro.com/

[EvolveSunVolt]

Сергей delphinpro, спасибо большое)