Grid types

Vertical grids

In vertical grids items are positioned inside fixed width container:

Initializing vertical grid

var grid = document.body.querySelectorAll(".grid-selector");
// Setting {grid: "vertical"} will be used by default
var asyncGrid = new Gridifier(grid);
        
Reinit vertical grid

Horizontal grids

In horizontal grids items are positioned inside fixed height container:

Initializing horizontal grid

var grid = document.body.querySelectorAll(".grid-selector");
var asyncGrid = new Gridifier(grid, {grid: "horizontal"});
        
Reinit horizontal grid

Grid overflows

How Gridifier is affecting grid overflow settings?


On this site we are setting it on body tag like this:

Hiding horizontal scrollbar on responsive sites

/* We think that is the best solution, because with responsive sites
     horizontal scrollbar is not really required  */
body {
    position: relative;
    overflow-x: hidden;
}
        

Centering grids

How to center vertical grid relative to wrapper?

CSS

.grid {
    margin: 0 auto;
    /* Max-width can be any required px/% value */
    max-width: 90%;
}
        

How to center horizontal grid relative to wrapper?

HTML

/* We can't use margins here, so we need emulate table vertical-centering through CSS */
<div class="gridWrapper">
    <div class="gridAlignerWrapper">
        <div class="gridAligner">
            <div class="grid">
            </div>
        </div>
    </div>
</div>
        
CSS

.gridWrapper {
    width: 100%;
    height: 500px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.gridAlignerWrapper {
    display: table;
    width: 100%;
    height: 100%;
}

.gridAligner {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

.grid {
    /* Specify required height here */
    height: 200px;
}
        

Grid spacers

How to add additional space around grid?

As we mentioned earlier in usage chapter, Gridifier is ignoring padding on grid due to the item resolving bugs in different browsers. You can set margins per grid items, however if you want add additional spacers around grid you should wrap grid with additional element with paddings:

Adding spacers with wrapper:
Html

<div class="spacer">
    <div class="grid">
    </div>
</div>
        
Css

.spacer {
    width: 100%;
    min-height: 200px;
    box-sizing: border-box;
    padding: 20px;
}

.spacer .grid {
    width: 100%;
}
        

Alternatively, you can use margins + calcs:

Adding spacers with margins/calcs:
Html

<div class="grid">
</div>
        
Css

.grid {
    width: calc(100% - 40px);
    margin: 20px;
    min-height: 300px;
}
        

Grid settings

What grid settings can be passed to constructor or changed later?

gridResize
sets grid sizes update type after item inserts/disconnects and grid resizes
gridResizeDelay
sets ms timeout, after which grid sizes updates will be applied
vpResizeDelay
sets ms timeout, after which Gridifier will reposition all grid items on viewport resizes
queueSize
sets size of reposition queue
queueDelay
sets ms timeout between reposition queue launches

Grid helpers

What additional grid helpers are available?

reposition()
reposition = function()
gridWidth()
gridWidth = function()
gridHeight()
gridHeight = function()
grid()
grid = function()

Events

What events are emitted during grid interaction operations?

onRepositionEnd event
event, which is emitted after all grid item reposition finish
onGridResize event
event, which is emitted after almost all grid operations
next: Insert types prev: Settings
Ξ
GRIDIFIER.IO
x