CSS Layout full of random sized divs [duplicate]

This question already has an answer here: Closed 10 years ago.

Possible Duplicate:

Any ideas on how I could implement a grid-view in CSS? - CSS

I'm trying to create a layout that is backward from what I usually do. I have hundreds of randomly sized divs that I want to fill in as muc开发者_运维知识库h of the page as possible. As a quick hack, it might look something like this:

|--------||-------------------||----||-----------|
|        ||        2          ||  3 ||     4     |
|   1    ||-------------------||    ||-----------|
|        ||-----------------|  |----|
|        ||                 ||---------|
|--------||        5        ||         |
|--------||                 ||    6    |
|    7   ||-----------------||         |
|        |                   |---------|
|--------|

I've been playing with float lefts, but they don't move upward to fill the gaps. How can this be done?

Thanks guys!

---

This kind of question was asked yesterday too. The solution was to use a JQuery plugin: Masonry.

Any ideas on how I could implement a grid-view in CSS? - CSS

---

Use the jQuery Masonry plugin or:

You will have to create a column/grid-based system. For example, div 1 and 7 go in their own parent div, div 2 and 5 go in their own parent div, 3 and 6 go in their own parent and so on.

You may be interested in using some of the famous grid systems:

• 45+ CSS Grid Systems
• 4 CSS Grid Systems and Why

You can also create the via:

• Grid System Generator