Gridifier is optimized per async and responsive grids creation. (Of course, px or mixed grid are also supported.) Library kernel consist of a set of synced queues, that are processing incoming operations. These queues are working maximum effectively to get maximum performance, especially on tablets and mobile devices.

Gridifier is written using vanilla javascript. No external libraries are required. You can pass native DOM items or jQuery objects to all gridifier functions. Gridifier ships with SizesResolver class, which can correctly determine sizes of responsive items, supports caching and even polyfills percentage sizes detection in old browsers.(IE8/Safari 5.1.7...)

Create both vertical & horizontal layouts. Vertical grid expands in fixed width container from top to bottom, horizontal grids expands from left to right in fixed height container.

Define CSS properties on layout items as usual, including margins, paddings and borders, as well as media queries. Gridifier isn't required to pass any CSS-related parameters, so if you change some css props later, you aren't required to replicate this changes in library instance creation code.

Gridifier can sort and filter inserted collections of items with build or custom functions, as well as resort or refilter all already rendered items. Sort helpers and multiple filters are available too. Library supports additional type of sorting called 'retransformSorters', and has many built-in sorters of such type.(For example, 'byArea', 'byOrientation' sorters allows to repack items in such way, that no gaps will exist in grid)

Gridifier ships with 40 toggle and 7 coordsChange functions. You can easily dynamically add your own togglers, renderers, sorters, filters, or modify those functions in API classes and build your new version with Grunt/Gulp task.

Gridifier tries to work maximum effectively to minify performance hits caused by browser reflows. Skyline insertion algorithm is blazing fast, average item reinsertion in modern browser requires only about 300 microseconds.

Gridifier was created as a side-effect during one real-time websocket app development. It's architecture consist of 3 main queues(render, operation, retransform), which all are synced together to correctly process different events, which can be emitted concurrently from web-socket server.

Gridifier supports appends, prepends, reversed appends/prepends, mirrored prepends, as well as insertBefore/insertAfter methods. All insert types supports no intersections strategy.

Grid item sizes can be dynamically changed with sizes transform function calls. Just write new item CSS in separate class and call toggle/add or rm css functions.

By default grid items are positioned with respect of the order according to the selected insert mode. This mode can produce gaps, when layout items have different sizes. You can exclude gaps with use of all available grid free space for new item insertion.

Gridifier is supporting two types of dragifiers: exchange algorithm is swapping intersected items pair, fit algorithm is allowing to place dragged items in any of grid 'cells', and than layout other elements around them. Both dragifiers are supporting multi-touch drags.