How to use layout grids and board grids
Use grids to align elements, maintain consistent spacing, and organize designs more precisely. Visily provides two types of grids:
- Layout grids apply to selected screens and help structure the content inside them.
- Board grids, also called Grid Mode, appear across the canvas and help align screens, diagram elements, and other objects.
Before you start
Make sure you have permission to edit the board and are in design editing mode.
Use a layout grid
Layout grids provide visual columns inside a screen, helping you align elements and maintain a consistent structure across different screen sizes. You can apply a layout grid to one screen or multiple screens at the same time.
Access the layout grid settings
- Select one or more screens.
- Open the Layout Properties panel.
- Turn on/off the Layout grid toggle.
You can also select Layout grid from the screen toolbar. The Layout Properties panel opens automatically and displays the layout grid settings.
Select a layout grid preset
Visily provides the following layout grid options:
- Column: Use column-based layouts for web or mobile screens.
- Row: Divide the screen into horizontal rows.
- Grid: Create a grid with both columns and rows.
After selecting a preset, you can customize its settings to fit your design.
Customize a layout grid
The available settings depend on the selected layout grid type.
- Number of columns/rows: Set how many columns/rows appear in the grid.
- Grid size: Adjust the size of each grid cell.
- Color and opacity: Change the grid color and transparency.
- Type: Choose how the columns/rows are positioned using Stretch, Left, Right, or Center.
- Width/Height: Set the width of each column or the height of each row. When using Stretch, Visily adjusts the width or height automatically.
- Margin: Set the space between the screen edge and the grid.
- Spacing: Adjust the space between columns.
When the layout grid is enabled, elements automatically snap to the edges of its columns as you move or resize them.
Use the board grid
The board grid displays a dot grid across the canvas, helping you position and align screens, diagram elements, and other objects.
To turn the board grid on or off:
- Open board settings from the bottom-right toolbar, then select Toggle board grid.
- Press Shift + G on your keyboard.
Notes
- Use a layout grid to organize elements inside a screen. Layout grids can be applied to one or multiple selected screens.
- Use the board grid to arrange objects across the canvas. The board grid applies across the entire board.
- Layout grids and board grids are editing guides and do not appear in your exported designs.
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.
Related Articles
How to use board version history
Use Board version history to review earlier states of your board, save important milestones, restore the entire board to a previous version, or copy specific designs without replacing your current work. Visily creates automatic version snapshots and ...How to use anchors
Use anchors to control how an element behaves when its parent container is resized. Anchors help keep elements aligned, positioned, or resized consistently inside screens, containers, and groups. Before you start Make sure you have permission to edit ...How to use spell check in a board
Use Spell check to identify and correct spelling errors in text across your board. Spell check is enabled by default and supports multiple languages. Before you start Make sure you have access to the board and permission to edit its content. How ...How to use Menus and Navigation Components
Use menu and navigation components to organize links and help users move between screens, pages, or sections of an interface. Before you start Make sure you have permission to edit the board and are in design editing mode. You can access menu ...How to align elements
Use alignment tools to arrange elements, groups, and screens consistently. You can align one element relative to its parent or align multiple objects relative to one another. Before you start Make sure you have permission to edit the board and are in ...