Gridzy.js 2 – Options

The easiest way to configure Gridzy is, to add the option parameters as HTML attributes, always prefixed by data-gridzy-

<div class="gridzy" data-gridzy-spaceBetween="20" data-gridzy-desiredHeight="400">
	<img src="https://placeimg.com/640/480/any?1" alt="a random image" />
	<img src="https://placeimg.com/640/480/any?2" alt="another random image" />
	<img src="https://placeimg.com/640/480/any?3" alt="yet another random image" />
	<img src="https://placeimg.com/640/480/any?4" alt="a random image again" />
	<img src="https://placeimg.com/640/480/any?5" alt="one last random image" />
</div>

Main Options


Default ValueDescription
animatetrueDetermines whether animations should be used when the grid changes (for example, when resizing the browser window or when setting a filter).
layoutjustifiedDefines the used layout. Gridzy.js 2 supports the two different layouts justified and waterfall. Each of them has its own additional option parameters, which you can find below this table.
filter*Determines which images should be shown. Any CSS-selector can be used as value here. Usually set automatically via filterControls (see next option).

Check out Gridzy.js 2 – Filters
filterControls
Determines which form elements can be used to filter the images. Any CSS selector, that selects HTML form elements, can be used as value here.

Check out Gridzy.js 2 – Filters
autoConsiderScrollBarstrueTo predict the available width if scroll bars appear or disappear. It’s always recommended to leave it on true unless this automatism causes problems.

A few more advanced options you can find at Gridzy.js 2 – API.


Layout Options

Gridzy.js 2 supports two different layouts (see layout in the main options above). Each layout has its own additional option parameters:

 

justified


Default ValueDescription
autoFontSizefalseAutomatically updates the font-size property of each box based on the original box size. By default the font-size property is not set explicitly.
desiredHeight190Defines the desired height of element rows. The actual height will be computed depending on the available width and the elements in the row.
hideOnMissingImagetrueHides boxes that contain images that could not be loaded.
spaceBetween4Defines the distance between elements in pixels.
fillLastRow
since version 2.1.0
DEPRECATED
since version 2.3.0
trueArranges the images so that the last row is always completely filled. If you plan to append images dynamically, it could be a good idea to deactivate this.
Takes no effect on single rows (see fillSingleRow).
fillSingleRow
since version 2.1.0

DEPRECATED
since version 2.3.0
trueIf there is only one row, it arranges the images so that the row is always completely filled. If it can happen that you have only one or two images in the gallery, it could be a good idea to deactivate this.
lastRowAlign
since version 2.3.0
justifiedDefines the behavior of the last row. Allowed values are left, center, right and justified.
singleRowAlign
since version 2.3.0
justifiedDefines the behavior if there is only one single row. Allowed values are left, center, right and justified.

 

waterfall


Default ValueDescription
autoFontSizefalseAutomatically updates the font-size property of each box based on the original box size. By default the font-size property is not set explicitly.
desiredWidth250Defines the desired width of columns. The actual width will be computed depending on the available width and the number of columns.
hideOnMissingImagetrueHides boxes that contain images that could not be loaded.
horizontalOrderfalseDefines that the elements are placed strictly one element in each column from left to right, then starts again in the most left column independent in which column is more place. By default the elements will be always placed in the column with the smallest height.
spaceBetween4Defines the distance between elements in pixels.

However, you can customize Gridzy.js 2 much more to your needs. Take a look at Gridzy.js 2 – Semantic HTML.