Динамическая сеть N-Column с выровненными столбцами с гибкой или сеткой ⇐ CSS

[Anonymous]

Мне нужно распределить поля в формате сетки, где столбцы выстроены. Количество Colums непредсказуемо и зависит от того, сколько полей может соответствовать, поэтому я не могу использовать Display: Grid с конкретными сетчатыми колонками: n n .. .
С другой стороны, когда я использую Flex, столбцы не выносят в очередь. В приведенном ниже примере гибкого примера показано произвольное размещение каждой ячейки на основе зазоров. Столбцы должны выстроиться в очередь, и их число динамически определено. < /P>
Есть ли хорошее решение?

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

.field-label {
font-weight: bold;
font-size: 1.2rem;
}

.field-value {
font-size: 1.2rem;
}

.card-content-flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
}< /code>



Field
Value 1




Field 2
Value ABSAHUASHIUS




Field 3
Test Str Test Str Test Str Test Str




Field 4
XYZ




Field 5
ASDASSFDSFSDFSDFSDFSDFSD




Field 6
asas asdasd asdasd




Field 7
a




Field 8
---




Field 9
Long String Long String




Field 10
X




Field 11
Xsdfsfsdfsdfsf

Подробнее здесь: https://stackoverflow.com/questions/796 ... ex-or-grid