What the Grid Element Does
Think of the Grid as a large, flexible container. When you drag elements into it, you can position them freely—without needing to set direction, spacing, or alignment like you would in a traditional row or column layout.
Choosing a Grid Type
Instant provides two Grid types:
Full Width Grid: Spans the full width of the browser.
Boxed Grid: Has a fixed maximum width.
You can switch between these options at any time via the Layout settings in the right sidebar.
Adjusting Grid Height
To resize the height of your Grid:
Drag the resize handle at the bottom-right corner when the Grid is selected.
Or, set a specific height under Layout > Rows in the right sidebar.
Placing and Resizing Elements
Elements placed inside a Grid are fluid and adapt to the width of the viewport. You can resize and reposition elements directly on the canvas:
Use the blue grab handle to move items freely.
Use arrow keys for precise adjustments.
Alignment guides and transparent pink columns appear as you move or resize elements, helping you keep layouts consistent.
You can also adjust element size and position through the sidebar for finer control.
Responsive Layouts with Grid
Grid layouts are inherently responsive. Elements adjust automatically based on the screen width. You can also customize the layout for each device size (desktop, tablet, mobile), adjusting position and size per viewport without affecting others.
Combining Grid with Row & Column Elements
You can nest Row and Column elements within a Grid for added structure. When dragging elements into a row or column inside a Grid, hover over the container for two seconds. Once the pink grid lines disappear and a placement indicator appears, drop your element to place it correctly.