Masonry layout is a popular and modern style. You can easily use it on the block editor website. GutenKit Advanced Masonry block helps with all the necessary features and functions you need to design a Pinterest-like Masonry style on your WordPress website.

Follow this doc to learn how to add a Masonry layout to the block editor website. 

How to Use GutenKit Advanced Masonry Block #

Let’s go through different parts of the GutenKit Advanced Masonry block.

Add Masonry Items #

Once you enter the GutenKit Advanced Masonry Block, it is loaded with three Masonry items by default. You can add more by clicking the “Add Masonry Items” button. Among these items, you can add any type of block. 

Note that when you add a block to a masonry item, all block settings are available. 

Set Up Masonry Design #

Open the block settings and start from the Content Tab.

Content Tab

• Choose Style: Select a style between Masonry and Grid.
• Number of Columns: Define the number of columns.
• Gap Between: Adjust the gap between columns.
• Show Filter By Category: Enable this toggle button to show the category name.

Style Masonry Design #

From the Style Tab, we’ll focus on the customization part of the masonry items and filter items.

Style Tab

Item

• Padding: Increase the space inside the masonry items.
• Border Radius: Adjust the roundness of the masonry item border.

The following settings are applied both on normal and hover state.

• Background Type: Choose a background type between solid color and gradient.
• Border: Pick a color for the border, and change its style and thickness. 
• Box Shadow: Click the edit icon to get all the box shadow settings.

Filter Item

• Alignment: Adjust the placement of filter category items to left, center, & right.
• Gap Between: Define the gap between filter category items.
• Typography: Get all the typography customization settings for the filter category name.

The following features can be adjusted for Normal, Hover, and Active modes. Here, the active mode refers to the current masonry section displayed on your display or when you click on it.

• Font Color: Change the font color of the filter category.
• Background: Choose a background style between solid color and gradient.
• Border: Get border settings like color, thickness, & style.
• Box Shadow: Give a shadow effect to the caterer border.
• Padding: Adjust the spaces between the 
• Border Radius: Define the roundness of the filter category border.

Filter Wrappers

• Spacing Bottom: Make room between masonry content.
• Background Type: Pick a background type between solid color and gradient.
• Padding: Create space around the filter category.
• Border Radius: Adjust the roundness of the border.

That’s it! You will end up designing a stunning and responsive masonry design on your block editor website.