top of page


Grid is an advanced layouting tool that lets you precisely position elements within a 2-dimensional framework of columns and rows. You can adjust the grid in any section or container, and rearrange the layout at each breakpoint to achieve intricate, responsive designs that look great on any screen size.

Adjusting the grid layout

Each section and container you add has a 1x1 grid by default. To change the layout, select the section or container and from the floating menu choose a preset layout or create a custom grid. You can also adjust the grid layout from the Inspector panel under Display.

A blank section in the editor with a 1 by 1 grid. The dropdown in the floating menu is open to show preset grid layout options.

Adjusting the grid from the Inspector panel

Under Display in the Inspector panel, use the plus icons to add a column to the right or row to the bottom of your grid.

Click the dropdown arrows to adjust the column and row measurements. Each one has 3 dots next to it where you can delete the row or column, or add a new one on either side.

You can also set gaps between rows or columns.

Note: Changes you make to the grid from the Inspector panel affect the size and positioning of the content inside..

A section in the editor with a 2 by 2 grid applied so there are 4 cells. The Inspector panel is open showing the different adjustments you can make to the grid

Adjusting the grid on the canvas

From the floating action menu, choose Customize grid on canvas. Changes you make in this mode don’t affect the content in the grid.

In this mode you can drag to adjust existing grid lines, or drag from the left or top to add new ones.

Click Done when you’re finished editing.

The design looks slightly opaque to indicate that the mode to let you customize a grid on the canvas is on. There are prompts to drag gridlines to customize the grid and that doing so won’t affect the content


When you add an element to a grid cell, it automatically docks to the nearest vertical and horizontal gridlines.

Dock elements to control their position and prevent overlap at smaller screen sizes. Learn more about docking and margins here.

A design with text in the top left of a 2 by 2 grid. The text is selected and there are dotted lines connecting to the grid lines to the right and below the text, indicating that it is docked

Stretching across cells

Stretch elements such as images and containers across one or more grid cells to fill an entire area.

In a design with a 2-by-2 grid, there is an image placed on the right that has a grid line splitting it in half so that it is located in two cells. There is an icon over the top right of the image that indicates the image can be stretched to fill both grid cells

Positioning elements

You can drag and drop, or position elements using the Inspector panel under Location in grid cells.

Select the element you want to position. You can see which grid cell it’s placed in, and click on the box that corresponds with the cell you want to move it to. Position elements in more than one cell by holding down shift while you select the cells.

You’ll see the column and row numbers update according to the element’s new position.

A design with a 2 by 2 grid. An image in the bottom left is selected, and the Inspector panel is open to indicate where you can change the element’s location in the grid cells

Grid measurements

Go to View to toggle the Grid Measurements on or off. When they’re toggled on, you can see the measurements next to each row and column. Click the measurements to adjust them. Between the grid measurements, you can click on the plus icons to add additional rows and columns.

Grid offers different units of measurement that affect how your content responds to changes in viewport width. Learn more about measurements here.

A design open in the editor. In the top bar of the editor, the View option is highlighted and you can see in the dropdown where to select the Grid Measurements option. There’s a check mark next to it to indicate this option is switched on


Working with grid: When, why & how


Working with grid: When, why & how

Choosing a layout tool


Choosing a layout tool




Was this lesson helpful?

Thank you for your feedback!

How can we improve?

Thanks for submitting!

Explore more topics

Additional resources

Visit our help center

Ask the community

Hire an expert

Contact customer care

bottom of page