Columns

This node creates a multi-column layout.

The Columns node simplifies creating grid-like layouts with predefined ratios.

The Columns node is a specialized Group designed for splitting content into vertical or horizontal sections. You define the layout using a ratio string (e.g., "1 2 1").

Inputs

Layout Settings

Data	Description
Layout String	A space-separated string defining the ratio of columns. "1 1" means two equal columns. "1 2" means the second is twice as wide.
Layout Direction	"Horizontal" (default) or "Vertical".
Horizontal Gap	Space between columns.
Vertical Gap	Space between rows (if wrapping).

Constraints

Data	Description
Min Column Width	If a column becomes narrower than this, it may wrap (depending on implementation details).

Outputs

General

Data	Description
Node Reference	Reference to the container.

Usage

Two Columns (Sidebar + Main)

1. Add Columns.
2. Set Layout String to 1 3 (Sidebar takes 25%, Main takes 75%).
3. Place Sidebar content in the first slot, Main content in the second.

Three Equal Columns

1. Set Layout String to 1 1 1.

Detailed Behavior

• Flexbox: Uses flex-grow based on the numbers provided in the layout string.
• Children: The node expects children to match the number of defined columns.

Troubleshooting

• Wrapping: If content is too wide, it might break the layout. Use Min Column Width or ensure children handle overflow correctly.