css: вывод слов в несколько столбцов

Question

подскажите можно ли лишь с одного css сделать следующее:

есть много записей вида

<div>текст</div>

требуется вывести их в несколько столбцов, причем

записи располагаются так, чтобы занять всю ширину блока в котором содержатся указанные записи
записи располагаются сверху вниз слева направо (а не слева направо сверху вниз)

С одной стороны для части задач подходит display: flex, но в каждом пункте возникают некоторые проблемы

чтобы расположить записи по всей ширине блока в котором содержатся указанные записи надо использовать
```
 justify-content: space-between;
```

но в этом случае, если столбцов 3, а записей 5, то 2 последние записи будут как бы выходить из столбцов

.block {
    width:          200px;
  
    display:        flex;
    flex-flow:      row wrap;
    justify-content: space-between;
}

.block div {
    width:            calc(100% / 3 - 10px);
    margin:           5px;
    
    background:       orange;
}

<div class = 'block'>
<div>текст 1</div>
<div>текст 2</div>
<div>текст 3</div>
<div>текст 4</div>
<div>текст 5</div>
</div>

если использовать свойство column вместо row для flex-flow, то без ограничения высоты блока несколько рядов не получится

    .block {
        width:          200px;
      
        display:        flex;
        flex-flow:      column wrap;
        justify-content: space-between;
    }

    .block div {
        width:            calc(100% / 3 - 10px);
        margin:           5px;
        
        background:       orange;
    }

    <div class = 'block'>
    <div>текст 1</div>
    <div>текст 2</div>
    <div>текст 3</div>
    <div>текст 4</div>
    <div>текст 5</div>
    </div>

Подскажите, есть ли способ как-то обойти эти ограничения?

Answer 1

Вариант с columns не подходит?

for(let i = 0; i < 10; i++)
  document.querySelector('#column').innerHTML += '<div>Текст '+(i+1)+'</div>';

#column {
  display: inline-block;
  max-width: 100%;
  columns: 3 auto;
}

#column > div {
  display: block;
  background: orange;
  margin-bottom: 1em;
}

<div id="column"></div>

БЛОГ НА HUSL

css: вывод слов в несколько столбцов

Ответы (1 шт):