What Are Column and Row Layouts?
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.
When set to row, elements are placed side by side, from left to right.
When set to 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 child elements as a row or a column. This determines the container’s main axis.
Row layout arranges elements horizontally.
Column layout arranges elements vertically.
You can toggle the layout direction in the Layout section of any container.
Spacing
Instant gives you control over two types of spacing:
Spacing Around sets the distance between elements inside the container.
Spacing Inside sets the space between the container’s edges and its contents (similar to padding).
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. You can adjust horizontal and vertical gaps separately, or link them to change both at once. Using Gap helps maintain consistent visual separation without applying individual margins.
Distribution
Distribution controls how elements are positioned along the main axis of a row or column layout. It sets where the elements start and how space is distributed between them.
Options include:
Align to the start (top or left)
Center alignment
Align to the end (bottom or right)
Even spacing between elements with no space at the edges
Even spacing with equal gaps on the edges
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). For a row layout, alignment controls vertical positioning. For a column layout, alignment controls horizontal positioning.
Options include:
Align to the top or left
Center alignment
Align to the bottom or right
Stretch elements to fill the available space
Wrap
Wrap controls how elements behave when they exceed the size of the container.
If Wrap is set to No, elements that overflow may be clipped or extend beyond the container depending on the overflow settings.
If Wrap is set to Yes, elements that don’t fit in one row or column will move to the next line or stack as needed.
This 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:
Relative positions the element based on the layout and stacking order.
Absolute places the element based on a fixed offset within the container, allowing it to overlap other elements.
Sticky keeps the element in view while scrolling within its parent container.
Fixed anchors the element to the browser viewport, making it always visible (great for floating buttons or headers).
Absolute and fixed elements are not bound to the layout flow and should be used thoughtfully, especially in responsive designs.
Best Practices for Using Column and Row Layouts
Use column containers to stack elements vertically, such as sections with text, images, and buttons.
Use row containers for horizontal arrangements like navigation menus, cards, or icons.
Rely on Gap and Spacing for consistent layout rather than applying manual margins.
Use Distribution and Alignment together to fine-tune placement along both axes.
Enable Wrap in row or column containers when you want layouts to adapt to smaller screens.
Apply Positioning only when layout-based control isn’t enough, and test across breakpoints.