CODEWITHSUNDEEP
csshtml-listsmultiple-columns
dbx
dbx

Reputation: 133

Display list items as columns

I need to display list items in columns, in specific order.

For example, i have code like this:

<div style="height:400px;">
<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
</ul>
</div>

I want to display it in three columns like this:

1   5
2   6
3   
4

Or when there will be more elements:

1  5  9
2  6  10
3  7  11
4  8

column-count + column-width will not work as it try to display list filled horizontally and i need to display it in verticaly order (it's on if there will be no second or third column).

Is there solution for this?

Upvotes: 2

Views: 1320

Answers (2)

Andrew Maney
Andrew Maney

Reputation: 66

I've got a solution using Flexbox. It requires that your ul has a specified height.

ul {
    display: flex;
    list-style: none;
    flex-direction: column;
    flex-wrap: wrap;

    height: 400px;
}

li {
    flex-basis: 25%;
}

The "flex-direction: column" causes the items to stack vertically. The "flex-wrap: wrap" makes them wrap to the next column when one has been filled. And the "flex-basis: 25%" on the list items makes it so every item is a fourth the height of the parent. So this number can be changed if you want more or less rows per column.

Upvotes: 3

Novice Programmer
Novice Programmer

Reputation: 41

I dont know where you will be using it, so maybe my answer is wrong. Buy you can use table tag

<div style="height:400px;">
    <table><ul style="list-style:none;">
        <tr>
            <td>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
            </td>
            <td>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
            </td>
            <td>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>9</li>
            </td>
        </tr></ul>
    </table>
</div>

Upvotes: -1

Related Questions