[Help Center] Layout Grid

Layout grids help aligning elements on a screen, providing a visual structure to your designs. Take advantage of Visily’s Layout grid to ensure your designs stay consistent across different devices.

Applying Layout grids

Access Layout grids

You can apply Layout Grids to one screen or multiple screens you’re working on. To access this feature, you have two options:


  • Use the “Layout grid” toggle on the Layout Properties panel.
  • Or click on “Layout grid” in the context toolbar of your screen(s) and the Layout Properties panel will automatically expand to show the Layout grid toggle.

Hide/Show Layout grids

In the Layout Properties panel, you can easily control whether the layout grid is visible or hidden by clicking the “Layout grid” toggle:

  • Toggle on: Display the layout grid.
  • Toggle off: Hide the layout grid.

Applying Layout Grids

Editing Layout grids

Selecting a Grid preset

You can quickly choose from common presets for web and mobile screens, such as:

  • For web: 12-column grid, 12-column full-width grid, 15-column grid
  • For mobile: 3-column grid, 4-column grid, 5-column grid.

Once you select a preset, you can further tailor it according to your needs.

Customizing Grid settings

Beyond using presets, you also have the option to define the following properties of your grid:

  • Number of columns: Determine how many columns there are in the grid.
  • Color: The default color of a layout grid is red, with an opacity of 10%. You can change both the color and opacity by selecting the Color option.
  • Type: Choose how the grid columns displayed in screens, with options such as: Stretch, Left, Right, Center.
  • Width: Set the width of the columns. For grids with the Stretch type, the width adjusts automatically.
  • Margin: Specify the distance from the edge where each column begins.
  • Spacing: Control the spacing between each column.

Customizing Grid Settings

Design with Layout grids

When you enable the Layout grid, the Layout grid remains visible over the design elements of your selected screen.

As you move and resize these elements, they will automatically snap to the edges of the grid columns, helping you maintain precision and alignment.