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 Value	Description
animate	`true`	Determines whether animations should be used when the grid changes (for example, when resizing the browser window or when setting a filter).
layout	`justified`	Defines 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
autoConsiderScrollBars	`true`	To 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 Value	Description
autoFontSize	`false`	Automatically updates the font-size property of each box based on the original box size. By default the font-size property is not set explicitly.
desiredHeight	`190`	Defines the desired height of element rows. The actual height will be computed depending on the available width and the elements in the row.
hideOnMissingImage	`true`	Hides boxes that contain images that could not be loaded.
spaceBetween	`4`	Defines the distance between elements in pixels.
~~fillLastRow~~ ~~since version 2.1.0~~ DEPRECATED since version 2.3.0	`true`	Arranges 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	`true`	If 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	`justified`	Defines the behavior of the last row. Allowed values are `left`, `center`, `right` and `justified`.
singleRowAlign since version 2.3.0	`justified`	Defines the behavior if there is only one single row. Allowed values are `left`, `center`, `right` and `justified`.

waterfall

	Default Value	Description
autoFontSize	`false`	Automatically updates the font-size property of each box based on the original box size. By default the font-size property is not set explicitly.
desiredWidth	`250`	Defines the desired width of columns. The actual width will be computed depending on the available width and the number of columns.
hideOnMissingImage	`true`	Hides boxes that contain images that could not be loaded.
horizontalOrder	`false`	Defines 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.
spaceBetween	`4`	Defines 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.