Adaptive grid of <div>

Question

I want to make a webpage where there are, like, table 25-50 divs, and amount of divs in one row depends on html window size (e.g. 6 100px divs in a row for screen width of 640px, and 10 divs in a row for 1024px) How to implement it?

Answer 1

You can achieve this only with CSS using the float propety like this :

div{
    float:left;
}

See this FIDDLE as an example.

Answer 2

Try this.

#wrap div{
    width:150px;
    height:150px;
    background:aqua;
    display:inline-block;
    border-radius: 10px;
    vertical-align:top;
    margin-bottom:10px
}

Check the update fiddle code too: http://jsfiddle.net/YS5d7/26/