Minigrid is a minimal 2kb zero dependency cascading grid layout.
## 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');
- gridContainer -
string
|node
: required. The element selector or element where your grid items sit. - itemSelector -
string
: required. The grid item element selector. - gutter -
number
: optional. The space between items, the default is6
. - animate(element, x, y, index) -
function
: optional. - done(nodeList) -
function
: optional. Callback called after the grid is built. It returns the node list of grid items.
It returns a function with the element
,x
,y
and index
parameters 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');
});
## 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);
Minigrid won't fit all cases. It was done having in mind "cards" with same width and different heights. It won't work if your grid item has different width sizes.
If you need more control I'd recommend Isotope.
Please let me know where are you using Minigrid.
Plese see CONTRIBUTING.
MIT © 2015 Henrique Alves