Masonry

@since Cornerstone 7.6.0, and Pro 6.6.0

New to Cornerstone is the Masonry controls added to the Row Element. They offer an elegant way to arrange column based layouts that could have differing column heights for each part. Let's dig in!

Getting Started

In the Design section of the Row Element you'll see a toggle button for the Masonry group. Turning this on will enable Masonry and will also display all available controls to your masonry layout.

The columns are controlled by Row Element's Template controls. Clicking the Template button will also bring up the different breakpoint templates which you can control for differing mobile to desktop views. The Gap Width and Gap Height will control the gutters between each brick.

While Cornerstone will allow you to input anything into the Template control you should note that Masonry works best when your columns are divisible by themselves and equal a height of 100%.

Controls

• Origin Left — This will align each brick from left to right. It is enabled by default and when it is turned off it will align bricks from right to left, like so.

• Origin Top — This will align each brick from the top to the bottom. It is enabled by default and when it is turned off it will align the bricks from the bottom to the top, like so.

• Horizontal Order — This will align each row of bricks based on the order they are provided in the Cornerstone UI. If you notice in our previous examples from left to right on the Origin Left the bricks were aligned 1, 2, 3, 4, 5, 6. When Horizontal Order is disabled, the bricks will be aligned based on the smallest row that is available. The first two columns have bricks with a height of 200px and 100px respectively. The third column has bricks with 350px. Because the first two combined have a combined height of 300px we see in this example that the next time a 350px bricks is added, it is actually added to the first column because a height of 350px has not been reached and the masonry layout will continue to pack bricks until it sees that the column is the smallest.

• Stagger — This will control how many milliseconds the layout should wait before resizing. This is sometimes needed if you are using 3rd party plugins in your layout.

You can mix and match all these controls to get the desired layout you want. For instance, this example is with Origin Left and Origin Top disabled.

Under the Hood

Internally Cornerstone uses the Desandro Masonry Library. We determine the column width for you based on the smallest brick you have provided in your Row Template control.

Summary

Now you know how to easily build Masonry layouts in WordPress thanks to Cornerstone's powerful suite of design tools. Masonry layouts are especially helpful for photography websites but can also be used for any type of website where images or visuals are front and center. Masonry designs can also provide a nice visual break when dealing with content heavy websites or pages.