npm

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

minigrid

1.0.1 • Public • Published

minigrid

Minimal 2k (842 bytes compressed) zero dependency cascading grid layout.

Demo

Install

npm install minigrid

Usage

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

To avoid weird stuff to happen I'd suggest set position: relative in your main container.

.grid {
  position: relative;
}

Then set position, top and left to your grid items.

.grid-item {
  position: absolute;
  top: 0;
  left: 0;
}

API

minigrid(containerSelector, itemSelector, gutter);

  • containerSelector - string
  • itemSelector - string
  • gutter - number: gutter between items, default is 6

Responsiveness

minigrid is dead-simple and doesn't provide anything in-the-box however you can achieve this easily by doing:

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

Demo

Animation

Using CSS transition you can apply it to the grid item e.g.

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

Demo

License

MIT © 2015 Henrique Alves

install

npm i minigrid

Downloadsweekly downloads

236

version

1.0.1

license

MIT

homepage

alves.im

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability