The Grid element is a powerful layout tool that allows you to position elements freely on your canvas. Unlike traditional row and column layouts, the Grid gives you complete flexibility without needing to configure direction, spacing, or alignment.
Overview
Think of the Grid as a large, flexible container. When you drag elements into it, you can position them freely—giving you full creative control over your layout.
Grid vs Row/Column
Feature | Grid | Row/Column |
Element positioning | Free placement anywhere | Follows layout direction |
Spacing control | Manual positioning | Gap and distribution settings |
Responsiveness | Fluid, adapts to viewport | Based on layout settings |
Best for | Creative layouts, overlapping elements | Structured, repeating patterns |
Choosing a Grid Type
Instant provides two Grid types:
Type | Description |
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
There are two ways to resize the height of your Grid:
Method | How To |
Drag to resize | Select the Grid, then drag the resize handle at the bottom-right corner |
Set specific height | Enter a value 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.
Moving Elements
Method | Description |
Blue grab handle | Click and drag to move items freely |
Arrow keys | Use for precise adjustments |
Sidebar controls | Adjust position values for exact placement |
Visual Guides
As you move or resize elements, visual guides help you maintain consistent layouts:
Alignment guides — Appear when elements align with each other
Transparent pink columns — Show the underlying grid structure
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.
Per-Viewport Customization
You can customize the layout for each device size:
Viewport | Customizable |
Desktop | Position and size |
Tablet | Position and size |
Mobile | Position and size |
Adjusting position and size for one viewport does not affect the others, giving you full control over how your layout appears on each device.
Combining Grid with Row & Column Elements
You can nest Row and Column elements within a Grid for added structure.
How to Place Elements in Nested Containers
Drag an element toward a row or column inside the Grid
Hover over the container for two seconds
Wait for the pink grid lines to disappear
A placement indicator appears
Drop your element to place it correctly
This technique allows you to combine the flexibility of Grid layouts with the structured organization of row and column containers.
Best Practices
Practice | Description |
Use Full Width for hero sections | Take advantage of edge-to-edge layouts |
Use Boxed for content areas | Keep text readable with contained widths |
Check all viewports | Ensure your Grid layout works on all devices |
Use alignment guides | Keep elements visually consistent |
Combine with rows/columns | Add structure where needed within the Grid |
Quick Reference
Task | Action |
Add a Grid | Insert panel → Structure → Grid |
Change Grid type | Select Grid → Layout → Full Width or Boxed |
Resize Grid height | Drag corner handle or Layout → Rows |
Move element | Blue grab handle or arrow keys |
Resize element | Drag element edges or sidebar controls |
Customize per viewport | Switch viewport → Adjust position and size |
Grid Type Comparison
Feature | Full Width | Boxed |
Width | 100% of browser | Fixed maximum |
Edge-to-edge content | Yes | No |
Best for | Hero sections, backgrounds | Content sections, text areas |