Over a million developers have joined DZone.

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

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Hasin Hayder, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}