Create a vertical list that wraps horizontally

Question

Trying to create a list like this one:

https://i.gyazo.com/e9dfcd50b50670d4c9e0be94a4013c59.png

I am using Bootstrap and tried code like this but didn't work:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-md-12 flex-wrap flex-row flex-wrap justify-start items-start">
    <ul class="d-flex flex-wrap list-unstyled">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
</div>

It doesn't sort the items in the list vertically, it just keeps on going horizontally. I want the items to go vertically, as long as there is enough space, when there isn't enough space left, to move to new row horizontally. — Dsmufsemfisajd, Jun 12 '20 at 08:28
I'm assuming when you say "sort" you mean "lay out" or "render". I've provided an answer below, hope it achieves what you seek. — Ghassen Louhaichi, Jun 12 '20 at 09:30

score 2 · Accepted Answer · answered Jun 12 '20 at 09:18

By default, the direction of the flex container in Bootstrap is set to row. To achieve the desired behavior, you have to set the ul to have a direction of column by appending the Bootstrap class flex-column. You'll also need to set the height of this container otherwise the elements won't need to wrap to a new column.

Here is a code snippet that illustrates how to do it, please note that there are a few extra styles here just for display purposes:

ul {
    width: 200px;
    height: 150px;
    border: 1px solid black;
    box-sizing: content-box;
}

li {
    width: 100px;
    height: 30px;
}
    
li:nth-child(2n) {
    background-color: lightgrey;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-md-12 flex-wrap flex-row flex-wrap justify-start items-start">
    <ul class="d-flex flex-wrap list-unstyled flex-column">
        <li>Test 0</li>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
        <li>Test 5</li>
        <li>Test 6</li>
        <li>Test 7</li>
        <li>Test 8</li>
        <li>Test 9</li>
    </ul>
</div>

score 0 · Answer 2 · answered Jun 12 '20 at 11:48

You need a max height basis. For example, assuming you want 100% viewport height, use flexbox direction column, and flex-wrap:

   ul {
      max-height: 100vh;
   }

   <div class="col-md-12">
        <ul class="d-flex flex-column flex-wrap list-unstyled" id="list">
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test</li>
            ...
        </ul>
    </div>

Demo: https://codeply.com/p/5CBPWc59O8

Create a vertical list that wraps horizontally

2 Answers2