Minigrid is a minimal 2kb zero dependency cascading grid layout.

Demo

## Install

npm install minigrid

Using Bower:

bower install minigrid

## Usage

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

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

• 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.

function animate(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:

function animate(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

Bare in mind that minigrid's main concept is simplicity. The API should be always under 2kb. Bug fixes are more than welcome! For any new feature please Submit an issue first before send any pull request.

Thank you everyone for the help so far! 🍺

MIT © 2015 Henrique Alves