How can I resize an image grid dynamically as the browser width/height changes?

Question

I'm trying to design a page which contains a list of images and on re-size of the browser/window the images should get adjusted in such a way that the images should be in only three rows. For example initially I have 10 images in a row and as a whole I have total 30 images in three rows. When I re-size the window the images should get adjusted (as the window gets smaller, the grid goes to 7 images in a row and then to 5 images in a row). And at any point of time I should have only 3 rows.

I have added the below link which is serving same kind of purpose.

eg https://www.mozilla.org/en-US/about/?icm=tabz

Any suggestion will be appreciated.

Thanks in Advance.

Answer 1

That Mozilla page uses Animated Responsive Image Grid, a jquery plugin:

http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/

You'll want something like

$(function(){
    $("#the_id_of_your_grid").gridrotator({
        rows:3,
        columns:10,
        w[some number]:{rows:3,columns:7},
        w[some other number]:{rows:3,columns:5}
    })
});

where the two "w[some number]:" are the equivalent of the CSS media query @media (max-width: [some number]px) . There's full documentation on the plugin's website