minigrid

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');

Responsiveness

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

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

Animation

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

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

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

More

Please check the README for more information.