npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

minigrid

1.6.2 • Public • Published

icon

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

API

minigrid(gridContainer, itemSelector, gutter, animate, done)

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

animate

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

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

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

Limitations

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.

Built with Minigrid

Please let me know where are you using Minigrid.

Contributing

Plese see CONTRIBUTING.

License

MIT © 2015 Henrique Alves

install

npm i minigrid

Downloadsweekly downloads

201

version

1.6.2

license

MIT

homepage

alves.im

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability