Таблица с динамическим количеством строк и столбцов, отсортированных по вертикали

Question

У меня есть вопрос.У меня есть таблица, которая динамически заполняется заголовками из API.Допустим, это выглядит как на картинке ниже.

Что я хочу сделать, это то, что вместо сортировки по алфавиту, по горизонтали, я хочу, чтобы она сортировалась по алфавиту по вертикали.что-то вроде рисунка ниже:

Кроме того, количество столбцов и строк должно быть динамическим, внутри родительского контейнера, потому что я не могузнать возвращаемое количество элементов.Также размер каждого блока должен быть динамическим, так как я не знаю размер каждого элемента.

Я добавил структуру HTML, как показано ниже.PS должен поддерживать IE 11.

<div class="container">
<ul class="ulList"> 
    <li class="element">
        <div class="subelement">Aliquet justo orci </div>            
    </li>
    <li class="element">            
        <div class="subelement">Donec efficitur nibh</div>
    </li>
    <li class="element">
        <div class="subelement">Duis aliquam leo</div>            
    </li>
    <li class="element" >
        <div class="subelement">Duis aliquam leo id malesuada ultricies</div>            
    </li>
    <li class="element">
        <div class="subelement">Lorem </div>
    </li>
    <li class="element">
        <div class="subelement">Lorem  - ipsum dolor sit amet</div>
    </li>
    <li class="element">
        <div class="subelement">Mauris a dolor lacinia, sollicitudin justo</div>
    </li>
    <li class="element">
        <div class="subelement">Morbi dignissim ultricies orci</div>
    </li>
    <li class="element">
        <div class="subelement">Nullam at turpis at sem condimentum sodales ac</div>
    </li>
    <li class="element">
        <div class="subelement">Nulla facilisi</div>
    </li>
    <li class="element">
        <div class="subelement">Vestibulum scelerisque, est sed vestibulum interdum,</div>
    </li>
    <li class="element">  
        <div class="subelement">Vivamus</div>
    </li>        
    <li class="element">  
        <div class="subelement">Vivamus-tristique</div>
    </li>
    <li class="element">
        <div class="subelement">Vivamus-ultrices</div>
    </li>
</ul>

<ul class="ulList"> 
    <li class="element">
        <div class="subelement">Aenean</div>        
    </li>
    <li class="element">
        <div class="subelement">Aenean id magna vitae</div>     
    </li>
    <li class="element">
        <div class="subelement">Cras cursus est a urna </div>
    </li>
    <li class="element">
        <div class="subelement">Donec efficitur nibh sollicitudin</div>     
    </li>
    <li class="element" >
        <div class="subelement">Duis aliquam leo id</div>
    </li>
    <li class="element">
        <div class="subelement">Duis volutpat lacus at fermentum</div>      
    </li>
    <li class="element">
        <div class="subelement">Etiam ultricies nisl sit amet justo</div>
    </li>
    <li class="element">
        <div class="subelement">Fusce ex turpis</div>
    </li>       
    <li class="element">
        <div class="subelement">Morbi sit amet</div>
    </li>
    <li class="element">
        <div class="subelement">Nullam at turpis</div>
    </li>
    <li class="element">            
        <div class="subelement">Vestibulum</div>
    </li>
    <li class="element">
        <div class="subelement">Sollicitudin </div>
    </li>
    <li class="element">
        <div class="subelement">Vivamus</div>
    </li>   
    <li class="element">
        <div class="subelement">Vivamus ultrices enim eu turpis</div>
    </li>
</ul>

Редактировать: забыл упомянуть, я также хотел бы, чтобы каждый элемент имел одинаковую высоту в каждой строке.Так что, в основном, высший элемент должен определять высоту остальных элементов.

Редактировать 2: Добавлен CSS.

Пробовал css grid, но я знаю, что IE11 не очень нравится.Кроме того, мне нужно указать количество строк ...

.ulList {
border: solid 1px pink;
display: grid;
grid-template-rows: auto auto auto;
grid-gap: 2vw;
grid-auto-flow: column;
}

Я также пытался с flex, но не мог заставить его работать без установки высоты ... И возникают проблемы с выходом элементовродительское поле

.ulList {
display: flex;
flex-flow: column;
flex-wrap: wrap;
height: 200px;
}

Как показано на рисунке выше, используя решение @Jenifer Jiang с "columns = 4", когда текст разбивается надве строки, высота каждого элемента отличается, мне нужно, чтобы каждая строка имела ту же высоту, что и самый высокий элемент.

Answer 1

Вы можете использовать атрибут column-count, чтобы установить желаемое количество столбцов.Тогда он будет отображаться автоматически.И обратите внимание, что вы должны добавить поле для li, чтобы список отображался нормально.

Вот мой код CSS.

 <style type="text/css">
    .ulList {
        column-count: 4;
        column-gap: 2px;
        border: 1px solid red;
    }
    .element {
        margin-left: 2em;
    }
 </style>