Instant uses a column and row layout system that gives you full control over how elements are arranged. Understanding this system is the foundation of creating structured and responsive designs.
Overview
In Instant, every container can be set to behave like a column (vertical layout) or a row (horizontal layout). This determines the primary direction in which elements are placed inside that container.
Layout | Behavior |
Row | Elements are placed side by side, from left to right |
Column | Elements are stacked on top of one another |
Choosing the right layout direction is the foundation of a structured and responsive design.
Direction
The Direction setting defines whether a container lays out its elements as a row or a column. This determines the container's main axis.
Direction | Element Arrangement |
Row | Elements arranged horizontally |
Column | Elements arranged vertically |
Toggle the layout direction in the Layout section of any container.
Spacing
Instant gives you control over two types of spacing:
Type | Description |
Spacing Around | Sets the distance around the outside of an element |
Spacing Inside | Sets the space between the container's edges and its contents |
Spacing is defined in pixels. You can either link horizontal and vertical spacing values or set each side individually using the spacing icons in the editor.
Gap
Gap defines the space between elements inside a row or column container.
Configuration Options
Option | Description |
Horizontal Gap | Space between elements horizontally |
Vertical Gap | Space between elements vertically |
Linked | Change both values at once |
Using Gap helps maintain consistent visual separation without applying individual margins to each element.
Distribution
Distribution controls how elements are positioned along the main axis of a row or column layout. It sets where elements start and how space is distributed between them.
Distribution Options
Option | Behavior |
Start | Align to the start (top or left) |
Center | Center alignment |
End | Align to the end (bottom or right) |
Space Between | Even spacing between elements with no space at the edges |
Space Evenly | Even spacing with equal gaps at the edges |
Note: Distribution does not affect the order of elements—that's controlled by their position in the Layers panel.
Alignment
Alignment positions elements along the cross-axis (the opposite of the main layout direction).
Layout | Alignment Controls |
Row | Vertical positioning |
Column | Horizontal positioning |
Alignment Options
Option | Behavior |
Start | Align to the top or left |
Center | Center alignment |
End | Align to the bottom or right |
Stretch | Stretch elements to fill the available space |
Wrap
Wrap controls how elements behave when they exceed the size of the container.
Setting | Behavior |
No | Elements that overflow may be clipped or extend beyond the container (depends on overflow settings) |
Yes | Elements that don't fit move to the next line or stack as needed |
Wrap is especially useful for building responsive layouts that adjust to screen size, like galleries or button groups.
Combining with Positioning
In addition to layout settings, Instant allows you to manually position elements using the Position property.
Position | Behavior |
Relative | Positions the element based on the layout and stacking order |
Absolute | Places the element based on a fixed offset within the container, allowing overlap |
Sticky | Keeps the element in view while scrolling within its parent container |
Fixed | Anchors the element to the browser viewport, always visible (great for floating buttons or headers) |
Note: Absolute and fixed elements are not bound to the layout flow and should be used thoughtfully, especially in responsive designs.
Best Practices
When to Use Column vs Row
Use Case | Layout |
Stacking text, images, and buttons vertically | Column |
Navigation menus | Row |
Card layouts side by side | Row |
Icon groups | Row |
Form fields | Column |
Layout Tips
Practice | Description |
Use Gap and Spacing | Maintain consistent layout instead of applying manual margins |
Combine Distribution and Alignment | Fine-tune placement along both axes |
Enable Wrap | Allow layouts to adapt to smaller screens |
Use Positioning sparingly | Only when layout-based control isn't enough |
Test across breakpoints | Ensure positioning works on all screen sizes |
Quick Reference
Task | Location |
Set direction | Select container → Layout → Direction |
Set gap | Select container → Layout → Gap |
Set distribution | Select container → Layout → Distribution |
Set alignment | Select container → Layout → Alignment |
Enable wrap | Select container → Layout → Wrap |
Set spacing around | Select element → Spacing → Around |
Set spacing inside | Select container → Spacing → Inside |
Set position | Select element → Position |
Layout Properties at a Glance
Property | Controls | Affects |
Direction | Row or column layout | Main axis |
Gap | Space between elements | All children |
Distribution | Position along main axis | All children |
Alignment | Position along cross axis | All children |
Wrap | Overflow behavior | Layout flow |
Position | Manual element placement | Individual element |