Grid types

Vertical grids

In vertical grids items are positioned inside fixed width container:

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

Horizontal grids

In horizontal grids items are positioned inside fixed height container:

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

Grid overflows

How Gridifier is affecting grid overflow settings?

• Gridifier is not changing grid overflow settings.
• With responsive web-sites and vertical grids you should add overflow-x: "hidden" rule to body tag to avoid horizontal scrollbars.
• Unfortunately, you can't set overflow-x: "hidden" together with overflow-y: "visible" rules directly on the grid element. Browsers will automatically switch overflow-y to auto value.
• Setting grid overflow to "hidden" will make some animations(like rotates) look 'cut-off' in some cases, so we can't set it by default.

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

/* 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?

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

How to center horizontal grid relative to wrapper?

/* 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>
        

.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:

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

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

.spacer .grid {
    width: 100%;
}
        

Alternatively, you can use margins + calcs:

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

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

Grid settings

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

• fit - grid height/width is always set up according to max grid item Y2/X2.(used by default)
• expand - grid width/height is updated only to higher values.
• disabled - grid height/width updates are disabled.

• Gridifier is applying grid sizes changes after specified ms timeout.
• If multiple items are inserted/disconnected, this timeout will be rescheduled.
• It is required because it is too expensive to update grid sizes after each insert/disconnect on touch devices.
• On small grids you can set this value to 20 or 0, if delay between inserts and grid sizes changes is noticeable.

• With this setting you can control items count in one batch, processed by reposition queue.
• This can be especially useful with no intersections mode, when custom aligns(center, right, bottom) are used.

Grid helpers

What additional grid helpers are available?

Events

What events are emitted during grid interaction operations?