Columns
This node is used to layout your content in columns with gaps.
The Columns node does not have any own styling attached to it. Instead it arranges all its children into dynamic layouts using layout strings.
Layout strings
A layout string is simply a string of numbers with spaces between them. Every number represents a fraction of the full container width and is converted to a column. A Columns node with the layout string 1 2 1 that contains 5 children will be rendered like this:
Responsive layouts
Responsive layouts can easily be created by passing different values to the Layout String input using a States node and the Media Queries prefab.
Make sure the children you pass are set to a width of 100% of their parent.
Inputs
| Data | Description |
|---|---|
| Layout String | Determines the size and layout of the columns that the children are rendered into. |
| Horizontal Gap | The horizontal spacing between the columns in px. |
| Vertical Gap | The vertical spacing between the columns in px. |
| Layout Direction | If the columns should be rendered horizontally or vertically. |
| Justify Content | The position of children in unfilled rows. |