# 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 **📧 <hi@globosoftware.net>** - we’re happy to assist!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.globo.io/mega-menu/manage-menu-items/manage-submenu-items/apply-masonry-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.