The grid element is a foundational layout element which allows you to organize, align, and position elements within columns on the page.

Grids can contain up to 12 columns, separated by gutters. The column and gutter widths are customizable. Important note: our grids work best for 2, 3, 4, 5, 6, and 12 column grids.

If a 12 column grid doesn't work for your design, click here to learn about how to make a custom grid.

Grids are particularly useful for optimizing designs across different devices: by changing grids from a side-by-side layout to a stack at narrower screen widths, you can easily make your website responsive.

Scroll to the bottom for a video tutorial.

Select the the grid element icon from your left toolbar, and drag-and-drop it onto the page: The grid may be placed as a root element on the page, or placed within another grid or container.

By default, the grid will appear with three columns, and take up 100% of the width of the page (or parent container):

The narrow areas in between the three columns are the gutters. These represent empty space between each column.
​

To add a column, move your cursor to the far right or left border of the grid element. You'll see a yellow bar appear at the edge of the grid element:

Click this bar, and a new column will automatically be added to the grid:

The width of any column in the grid can be adjusted by dragging the gutter. When you hover over a gutter, you'll see the cursor change to a "resize" arrow. Drag to the left or right to make the column wider or narrower:

Once you start dragging, pink areas will appear that indicate the layout of the grid element. The column gutter will "snap" to one of these slots in the grid when you resize it.

If one grid isn't giving you the options you need to achieve your layout, you can always nest grids inside of each other. This allows for greater design flexibility and can make for a better responsive experience. Read more about making your grid responsive below.

To adjust the width of the gutters in the grid element, you can use the slider in the top toolbar:

The same slider is also available in the Dimensions Panel in the right toolbar.

Adjusting the gutter width will apply to all gutters in the grid element.

To delete a column, drag the column gutter all the way to the far left or right edge of the grid element, or drag and drop it next to another gutter.
​

You can toggle the layout of a grid element between three different modes: displaying all its columns in a horizontal row (default), displaying its columns in a split layout, and displaying its columns in a vertical stack.

The primary use for this is to have your page layout adapt responsively to narrower screen widths.

To have the grid switch to a different layout mode on a mobile device, first select the device mode from the dropdown in the top toolbar.

Then, select a grid layout option from the top toolbar, or from the dimensions panel in the right toolbar.

This will split the columns of the grid. The columns will split into multiple vertical stacks, based on the number of non-stacked columns remaining.

This will stack the columns of the grid. The columns in the grid will stack vertically, from left to right.

If neither option is selected, the grid will retain its default layout and display all columns in a horizontal row.
​

Need something more visual to help explain grids? Watch this helpful video!