CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Tom Tichý
Tom Tichý

Reputation: 1065

Three-column layout with block of different heights

I have simple 3-column layout based on Twitter Bootstrap. The only problem is, that each column is assembled from block with different heights. 

<div class="container">
    <div id="blocks" class="row">
        <div class="span4">
            <div class="block" id="block1">
            <div class="block" id="block4">
            <div class="block" id="block7">
        </div>
        <div class="span4">
            <div class="block" id="block2">
            <div class="block" id="block5">
            <div class="block" id="block8">
        </div>            
        <div class="span4">
            <div class="block" id="block3">
            <div class="block" id="block5">
            <div class="block" id="block9">
        </div>
    </div>
</div>

This way.

It works quite fine, except for small displays. Then the order of blocks is not sorted.

On small displays

Is there some way to achieve sorted blocks without any JavaScript?

Upvotes: 5

Views: 2872

Answers (3)

ViliusL
ViliusL

Reputation: 4735

Other way is to use column-count: 3; and column-gap: 10px;. But order is different on wide screen.

Fiddle: https://jsfiddle.net/ksvx2txb/102/

Upvotes: 0

Raver0124
Raver0124

Reputation: 522

Its gonna be quite difficult to achieve this, you might wanna play around with single list with float: left; or display: inline-block;

or

you can have 2 set of list with @media inside the css, so depend on the screen size you can show or hide the selected div

css example

@media screen and (min-width: 768px) and (max-width: 1024px) {
.displayFullScreen {display: block;}
.displayMobileScreen {display: none;}
}


@media screen and (max-width: 767px) {
.displayFullScreen {display: none;}
.displayMobileScreen {display: block;}
}

Upvotes: 0

Jackson
Jackson

Reputation: 3518

There is no way to achieve this effect with the 3 column structure. If the blocks were all the same height then you could float:left all the blocks without the columns then they would wrap in order. Since they are not the same size you would have to use a JavaScript such as masonry:

http://masonry.desandro.com/

Upvotes: 1

Related Questions