CODEWITHSUNDEEP
htmlcss
Marty
Marty

Reputation: 39458

Can I create this layout without columns in pure CSS?

I'm working on my blog which when viewed in > 1020px wide will look like this, using three columns which will load posts in left to right (i.e. place post 1 in the left column, post 2 in the middle, three in the right, then start from the left column again):

enter image description here

This works great, however when the browser reduces down below 1020 the layout will convert to a single column. This is visually easy to achieve by placing the columns underneath each other (looks fine), but this causes the posts to be out of order - the first three posts if there were 9 posts total would actually be post 1, 4 and 7.

I want to maintain the cleanliness of pure CSS managed layout, so I'm wondering if there's a trick to having the above three column layout with floated elements in a single container (rather than three columns).

I've played around a little bit with just floating left and clearing after every three tiles, but that of course just ends up placing every three tiles in a 'row' underneath the tallest tile in the 'row' above.

Upvotes: 3

Views: 301

Answers (1)

Petah
Petah

Reputation: 46050

I know you said you wanted pure CSS but the jQuery library Masonry is specifcally designed for this kind of stuff.

http://masonry.desandro.com/

Otherwise I have not found a good way of achieving this with pure cross browser compatible CSS.

Upvotes: 5

Related Questions