Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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;
$(document).ready(function(){
	$(window).resize($.debounce(250,function(){
		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. :)

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}