> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/mega-menu/manage-menu-items/manage-submenu-items/apply-masonry-layout.md).

# Apply masonry layout

## 🧱 How to Apply a Masonry Layout in Globo Mega Menu

Enhance your website's navigation by arranging submenu items in a dynamic, grid-like masonry layout. This design allows for a visually appealing and organized display of menu items.

### 🔹 Step 1: Create a Top-Level Menu Item with a Mega Menu

1. Open the **Globo Mega Menu** app in your Shopify admin panel.
2. Navigate to your existing menu or create a new one.
3. Add a new **top-level menu item** that will serve as the parent for your masonry layout.
4. Assign a **blank mega menu** to this top-level item to provide a foundation for the masonry arrangement.

<figure><img src="/files/BJJtrm4ck5LATudujWGp" alt=""><figcaption></figcaption></figure>

### 🔹 Step 2: Add 'Group of Items' Blocks

1. Within the mega menu editor, insert multiple **'Group of Items'** blocks.
2. The number of groups you add will correspond to the number of columns in your masonry layout. For instance, adding four groups will create a four-column layout.

<figure><img src="/files/kOOsTgJIj7u8RaambSmO" alt=""><figcaption></figcaption></figure>

### 🔹 Step 3: Adjust the Width of Each Group

1. Customize the width of each **'Group of Items'** block to ensure they align properly and create a balanced masonry effect.
2. Proper width adjustment is crucial for achieving the desired visual structure.

<figure><img src="/files/EtKo5INw2dFuxNe6nLhn" alt=""><figcaption></figcaption></figure>

### 🔹 Step 4: Add Content to Each Group

1. Click the **Add block** within each **'Group of Items'** block to add content.
2. Set the width of each content block to **12** to maintain consistent sizing and prevent the blocks from appearing too small.

<figure><img src="/files/Y7y8r3ossRBUFFj9FOO5" alt=""><figcaption></figcaption></figure>

### ✅ Final Result

By following these steps, your submenu will display items in a masonry layout, enhancing the visual appeal and organization of your website's navigation.

**💬 Need help?**

Email us at **📧 <contact@globo.io>** - we’re happy to assist!!