Skip to main content


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.


Layout StringDetermines the size and layout of the columns that the children are rendered into.
Horizontal GapThe horizontal spacing between the columns in px.
Vertical GapThe vertical spacing between the columns in px.
Layout DirectionIf the columns should be rendered horizontally or vertically.
Justify ContentThe position of children in unfilled rows.