Over a million developers have joined DZone.

An Awesome Animated Responsive Grid in a Few Lines of JavaScript and CSS3 Goodness

DZone's Guide to

An Awesome Animated Responsive Grid in a Few Lines of JavaScript and CSS3 Goodness

· Web Dev Zone ·
Free Resource

Access over 20 APIs and mobile SDKs, up to 250k transactions free with no credit card required

Screen Shot 2013-08-15 at 4.36.33 AM

Responsive grids are a pain to many people, because sometimes they have to achieve the desired effect by using either complex plugins or CSS layout styling with the help of media queries. Here is a nifty solution that  works perfectly well on all devices. The responsiveness is done using a few lines of JavaScript that listens to the window resize event. But to save the browser from refreshing the layout, it uses the debounce technique that only fires after the resizing is done.

The trick is pretty neat. All you have to do is give it a minimum width for the grid items. Then, once resized, it divides the window width by that minimum, extracts the integer part and displays that many items in a row by setting a width (in percentage) for each of them.

var minWidth = 250;
		var w = $(window).width();
		var numberOfItems = parseInt(w/minWidth);
		var itemWidthinPercentage = 100/numberOfItems;
		$(".grid ul li").css({width:itemWidthinPercentage+"%"});

See the working grid at http://hasinhayder.github.io/responsivegrid and resize the window to check out how it fits perfectly.

The animation is done using the following CSS3 transition for each list item:

-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-ms-transition:all 0.2s ease;
transition:all 0.2s ease;

Checkout the demo and fork the GitHub repo to customize it anyway you’d like to. :)

#1 for location developers in quality, price and choice, switch to HERE.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}