Minimal 2kb zero dependency cascading grid layout.

Demo

## Install

npm install minigrid

Using Bower:

bower install minigrid

## Usage

<divclass="grid"><divclass="grid-item"></div><divclass="grid-item"></div><divclass="grid-item"></div><divclass="grid-item"></div></div>

vargrid=require('minigrid');grid('.grid','.grid-item');

Set position: absolute to your grid items.

.grid-item{position: absolute}

For best practices set position: relative in your main container.

.grid{position: relative}

• containerSelector - string: required. The element selector where your grid items sit.
• itemSelector - string: required. The grid item element selector.
• gutter - number: optional. The space between items, the default is 6.
• animate - function: optional.
• done - function: optional. Callback called after the grid was updated.

It returns a function with the element,x,y and index for each grid item.

functionanimate(el,x,y,index){// Use your favourite library for animate the element}minigrid('.grid','.grid-item',6,animate);

minigrid is dead-simple and doesn't provide anything in-the-box but you can do:

window.addEventListener('resize',function(){minigrid('.grid','.grid-item');});

Demo

## Animation

The simple solution is to add a CSS transition in your grid item:

.grid-item{transition:.3s ease-in-out}

Demo

Or take it to the next level by using your favourite library. The example bellow is using the awesome Dynamics.js library:

functionanimate(item,x,y,index){dynamics.animate(item,{translateX: x,translateY: y},{type: dynamics.spring,duration: 800,frequency: 120,delay: 100+index*30});}minigrid('.grid','.grid-item',6,animate);

Demo

MIT © 2015 Henrique Alves