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

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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. :)

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}