With the Grid element, you can transform Instant into a flexible, freeform canvas for building your sections. It allows you to use Instant as a powerful design tool, enabling you to create layouts just like you would with your favorite design platforms.

The Grid element can be seen as one large section container, all elements you drag from the element panel into the Grid element can be placed where you want it without setting up the container direction, inner spacing and alignment.

There are 2 Grid elements available, the Full width grid and the Boxed Grid. The Full width Grid will always fill up the maximum width of your browser screen while the boxed Grid has a maximum width applied. You can for example turn a Boxed Grid into a Full Width Grid after placing it on your grid by settings in the right sidebar and vice versa.

The Grid height can be changed by dragging the size button in the bottom right corner when you have the Grid selected. Additionally you can set it manually within the right side bar under Layout > Rows

Sizing is fluid and depends on the viewport width, you can make any element in any dimension larger or smaller directly on the canvas. When selecting an element, a Blue grab handle will appear, you can use this to move your element around on the canvas. Additionally this can be done through using the arrow keys as well.

Guidelines and transparent pink columns will appear to help you align your element in relation to other elements and the Grid itself. These will appear both when moving and resizing an element.

It is also possible to change the location and size of your element directly though the sidebar.

The beautiful side of utilizing Grid is that it is very easy to make it responsive. All elements you place onto the canvas are in a way fluid and resize based on the viewport width automatically. Additionally you can reposition and resize elements for each specific viewport without affecting the others.

It is also possible to add Row & Column elements into a grid. When dragging an element into a Row or Column that is placed within a Grid, you have to hover on top of the Row / Column for 2 seconds until the pink Grid lines disappear and a Grid placement indicator appears.