Masonry

Masonry layouts are like a jigsaw puzzle. This layout attempts to create a layout that best fits the various sizes and shape of the items in the layout. The width of featured and non-featured items can be specified in the module settings as well as the gutter size.

Masonry

Masonry layouts are typically vertical grids rather than horizontal grids which means that the script will try to place the items evenly across the page rather than evenly down the page.

The example below shows a masonry layout using the default settings. The middle larger image is a featured item and takes approximately twice as much space in the layout as the non featured items.

Masonry with Overlay

This style adds a static overlay to all items in the layout.

Masonry with Animated Overlay

This style adds an animated overlay ot the item when the user hovers over any item in the layout.

Masonry with Overlay only on featured items

The overlay on featured items only option adds the title, text or any other elements specified in the item layout with an overlay effect only to featured items. Any non featured items are displayed as an image only. 

Masonry with boxed styling

The masonry example below uses the built in boxed styling that can be applied to most of the Zentools layouts. The boxed styling targets all items other than the first item (in this case all items except for the image) and places in a padded box. The color of the box is easily specified in the module settings.

Masonry with small items

This is an example of the masonry layout using custom values for the widths of the standard and featured items. In this case standard items have a width of 12% and featured items have a width of 25%. Custom widths are easily created by creating custom settings in the module parameters.

A note on using masonry layouts

The Zentools2 module provides a lot of control when it comes to rendering masonry layouts. It's important to note that you may experience inconsistent results depending on the values you supply for item widths and gutters.

The demo above (other than the small example) use the following width values:

• Item width: 24%
• Featured Item Width:49%
• Gutter Width:1%
• Bottom gutter: 4px 

Masonry Settings

Options

The following options can be found in the options panel in the module settings.

Select a theme:

none / boxed / overlay / Featured Overlay / Animated Overlay

Make items equal height:

off / on

Theme

The following options can be found in the theme panel in the module settings

Item Collapse width

This setting specifies the browser width at which all items are given 100% width.

Item Width

This setting specifies the width of non-featured items in the layout. Use px or % values.

Featured Item Width

This setting specifies the width of the featured items in the layout. Use px or %.

Gutter width

This setting specifies the gutter between items in the layout. Use px or %.

Bottom gutter width

This item specifies the margin below items in the layout. Use px.