Столбцы Flexbox укладки/мозаики/мозаики с текстом DIV (не изображениями), выполненные с помощью чистого CSS [дубликат] ⇐ CSS

[Anonymous]

Я везде искал и ищу решение, как создать мозаичный макет только с помощью CSS. Я даже не уверен, что термин «мозаика» — это правильный термин для того, что я пытаюсь сделать... сворачивание плиток, складывание столбцов, карточек... что бы это ни было здесь, это изображение того, чего я пытаюсь достичь.


Это создается с использованием следующего HTML-макет:

Код: Выделить всё

Element 1-1

Text
text
text

more text

Text
text
text

more text

Text
text
text

more text

Element 1-2
Element 1-3
Element 1-4
Element 1-5
Element 1-6
Element 1-7
Element 1-8
this is bigger a little
Element 1-9

И следующий CSS:

Код: Выделить всё

      .container {
background-color                        : lightgray;
border                                  : 2px solid black;
height                                  : 700px;
overflow                                : auto;
width                                   : 1000px;
}
.mosaic {
width                                   : 100%;
min-height                              : 100%;

display                                 : flex;
flex-wrap                             : wrap;
flex-direction                        : row;
column-gap                            : 5px;
justify-content                       : flex-start;
row-gap                               : 5px;

}
.item {
background-color                        : darkorange;
padding                                 : 3px;

flex-basis                              : calc(50% - 10px);
flex-grow                               : 1;
}

По сути, когда позволяет пространство, элементы (или «карточки») должны располагаться плиткой (т. е. сворачиваться до соседнего пространства во втором столбце) внутри контейнера с вертикальной прокруткой. Высоту отдельных карточек следует рассчитывать на основе их содержимого и обычно не указывают, поскольку это карточки с текстом, а не с изображениями, с определенной высотой и шириной.
Несколько вещей, которые я хочу добавить в конечный результат:

• только два столбца, если доступно горизонтальное пространство экрана (т. е. более 1000 пикселей экрана)
• минимальная ширина карточки не может быть меньше 500 пикселей в ширину, но может увеличиваться до любой доступной ширины, чтобы они занимали 50 % места.
• высота карты изменяется в зависимости от текстового содержимого (например, в примере элемент изображения 1–1 большой с текстом содержимое, чтобы в столбце 2 можно было разместить несколько карточек меньшего размера в доступном пространстве столбца, а не увеличивать элемент 1-2)
• Если средство просмотра представляет собой мобильное устройство, которое не может отображать ширину 1000 пикселей, то оно должен свернуться в один столбец.

Я пытался добиться желаемого результата, используя сетку CSS и макеты столбцов CSS, но ничто не создает эффект плитки.
Javascript можно использовать в крайнем случае.

Подробнее здесь: https://stackoverflow.com/questions/791 ... -done-with