Articles on: Site editing
This article is also available in:

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


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



Changing the number of columns


Open Tools, then go to the Grid settings icon:



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



  • 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:



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


Enabling grid snapping


When this feature is enabled, absolutely positioned 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:



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


Updated on: 08/25/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!