Standalone library for grid layout building

grid, layout, drag, draggable, resize, resizable
npm install gridie@0.1.6



gridie.js helps you building dynamic draggable/resizable layouts quickly. It's a standalone library inspired in gridstack.js and packery. It features multiple columns, non-fixed items height, mobile support and a quite small size (~6kb minified).


Just include gridie.js and gridie.css between your stuff and you're ready to go. Gridie is also available as an npm module you can use along with browserify. Just $ npm install gridie it.


All you need is a container element with a series of similar item elements, like:

<div id="container">
    <div class="cell" data-x="0">Item 1</div>
    <div class="cell" data-x="1">Item 2</div>
    <div class="cell" data-x="2">Item 3</div>

The minimal data each item needs is a data-x attribute, representing a column.

Item attributes

  • data-x item's horizontal position. This represents a column number. Required
  • data-y item's vertical position in pixels. If not set, elements are stacked in order
  • data-width item's width in columns (ie. not pixels). Defaults to 1

Then you can initialize the layout passing the container element, and an optional settings object:

var g = new Gridie(document.getElementById('container'), {
    columns: 6,
    selector: '.cell',
    resize: true,
    drag: true


  • columns amount of columns, defaults to 6
  • selector items selector, defaults to '.cell'
  • resize whether items could be resized or not. Could be false, true or a settings object. Defaults to true
    • handler selector for a resize handler element
  • drag whether items could be dragged or not. Could be false, true or a settings object. Defaults to true
    • handler selector for a drag handler element
  • init whether the layout should be rendered immediately or not. Defaults to true


Released under the MIT License

Copyright (c) 2016 Nicolás Arias