Gridifier rethinks HTML layout & improves browser's grid layouting engine with the improved version of the Skyline 2D bin-packing algorithm.
<Demo grid/>
Interaction
hide
Toggle
Drag
Filter
hide
All
Green
Violet
Yellow
Red
Blue
Sort by
hide
Color+
Names+
Codes+
Colors-
Names-
Codes-
Ο
Omicron
#927
Η
Eta
#919
Ε
Epsilon
#917
Ν
Nu
#925
Μ
Mu
#924
Ψ
Psi
#936
Ω
Omega
#937
Δ
Delta
#916
Θ
Theta
#920
Ξ
Xi
#926
Α
Alpha
#913
Ζ
Zeta
#918
λ
Lambda
#955
Π
Pi
#928
ϒ
Upsih
#978
Χ
Chi
#935
<Features/>
Async & Responsive
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.
Vanilla JS
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...)
Grid directions
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.
Works with normal CSS
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.
Sorts and filters
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)
Highly customizable
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.
High performance
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.
Ready for real-time apps
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.
Rich selection of insert types
Gridifier supports appends, prepends, reversed appends/prepends, mirrored prepends, as well as insertBefore/insertAfter methods. All insert types supports no intersections strategy.
Sizes transforms
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.
Custom sort dispersion
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.
Dragifiers
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.
<Key features/>
Concurrent operations
Connect grid to any real-time app. Queue-based async kernel. Created from app requirements during one real-time websocket app development.
Unlimited multi-touch dragifiers
Drag as many items as required simultaneously on touch devices. Select intersection or discretization algorithm per drag interactions.
Mobile first
Create grids optimized per touch-devices. High performance both on desktops/mobiles. Write your media-queries and CSS like usual. Vanilla JS. Compatible with any frontend framework.
Smart sorting & filtering engine
Sort grid items by data and then optionally by size. Multiple sorts/filters. 40+ built-in togglers. Extensible API. Custom version builds with Grunt.
<Code/>

require(['gridifier'], function(Gridifier) {
    // Create async grid(with multi-touch dragifiers) on any HTML elements with one liner... Boom.
    var asyncGrid = new Gridifier(gridSelector, {class: "gridItem", dragifier: true}).appendNew();
});
    
<Team/>
Why Gridifier?
“Create, sort, filter, drag HTML items on async grids easily with Gridifier.js. New V2 release is 2x smaller, has simplified API and is ready for usage in real-time apps.”
Ξ
GRIDIFIER.IO
x