> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Setting up the grid for Flex Block

The **Grid** helps you align elements more precisely, build the block structure, and work with responsiveness. In this guide, you will learn how to enable the grid, set the number of columns, change its appearance, and use snapping to columns.  

**Contents:**  
* [Enabling the grid](#1-enabling-the-grid)
* [Changing the number of columns](#1-changing-the-number-of-columns)
* [Changing the grid color](#1-changing-the-grid-color)
* [Enabling grid snapping](#1-enabling-grid-snapping)

# Enabling the grid  

In the top toolbar, click the **Tools** icon. Then, in the menu that opens, enable the **Show grid** option:  

![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/sitka-angl-1_1u71n21.png)

# Changing the number of columns  

Open **Tools**, then go to the **Grid settings** icon:  

![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/sitka-angl-2_fk7fpb.png)

In the settings window, select the number of columns for each device type:  

![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/sitka-angl-3_afdv3q.png)

* **Desktop**: 12 (default), 8, 6  
* **Tablet**: 8 (default), 12, 6  
* **Mobile devices**: 4 (default), 6, 2  

You can also set a custom number of columns, but no more than 36/24/12 for desktop/tablet/mobile devices respectively.  

| **Note:** Changing the number of columns automatically recalculates their width.  

# Changing the grid color  

Open **Tools**, then go to the **Grid settings** icon. In the **Color** field, choose the display color for the grid:  

![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/sitka-angl-4_jyklei.png)

| **Note:** This helps you see the grid better on dark or light backgrounds.  

# Enabling grid snapping  

When this feature is enabled, [absolutely positioned](/en-us/article/absolute-positioning-of-elements-in-ordinary-blocks-180v5et/) elements will automatically **snap to columns** when you move or resize them.  

This allows you to:  
* Easily align elements to the grid  
* Maintain a clear structure  
* Avoid accidental misalignments  

To enable it, open **Tools** and turn on the *Snap to objects* function in the menu that appears:  

![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/sitka-angl-5_4fic0c.png)

| **Note:** The grid does not affect the final appearance of your site — it is only a design aid.