CODEWITHSUNDEEP
htmlcss
skyisred
skyisred

Reputation: 7105

Wrap items in columns of unequal height

The items need to arrange in columns based on max column height, like this 

item 1 | item 6
item 2 | 
item 3 |
item 4 |
item 5 |

I tried using this column css

ul {
    height: 150px;
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

but it arranges the items in columns of same height like this

item 1 | item 4
item 2 | item 5
item 3 | item 6

Upvotes: 2

Views: 67

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241008

As an alternative to CSS3 columns, you could also use CSS3 flexboxes.

Set the display of the parent element to flex, set flex-direction to column and then force it to wrap by adding flex-wrap: wrap.

The flexbox container element will respect the height, which seems to be what you're trying to achieve.

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 140px;
}
<ul class="container">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
</ul>

Upvotes: 1

Related Questions