A Layout Grid is a visual aid that helps you maintain object alignment within a framework.

The layout grid can only be used for frames. If the Layout Grid cannot be found in the Properties panel on the right side of the canvas, it may be that no frame has been selected.

Add Layout Grid

To add a layout grid to the framework:

Select Framework

Click the+button on the right side of the Layout Grid in the Property Panel

Default Layout Grid

By default, the grid added to the frame will be 10 * 10px, and you can change the size in the layout grid settings window.

The use of grids allows you to create various layouts (photo libraries, icons, magazine layout, etc.).

A uniform grid is static and pixel fixed. You can adjust the size of the frame, but the grid size remains fixed unless you make changes.

Add columns and rows

You can add multiple grids to the framework. Columns, rows, or both!

After clicking+add layout grid, select grid in the property panel to open the settings window

You can customize the grid here:

Select Rows or Columns to change the grid direction from horizontal to vertical. The default value is 5.

By default, the grid will fill the entire framework. To change the layout, change the Type to "Left" or "Center" (the "Top" or "Center" of the horizontal grid)

Non elastic grids allow you to choose the width/height of grid columns/rows.

Change the color and opacity of the grid

View and hide layout grids

Select Framework

Click on the "Eye" next to the grid settings in the property panel

To switch the visibility of all grids in the entire document, use the Control+G keyboard shortcut or select Layout Grids from the view menu in the upper right corner of the toolbar.

Copy and paste layout grids

Fine tuning a layout grid may require some effort. You can copy and paste them, or add layout grids to styles for reuse

Select Framework

Click on the added layout grid

When selected in blue, use the system's copy shortcut to copy (use shift+select to select multiple layers)

Paste the selected content onto a new frame

Change the color of the layout grid

The default color for the layout grid is light pink, but you can change it to any color you want.