columns
columns
allow developers to control the layout of a view and its components, which is particularly useful for medium and large screens.On screens narrower than the 768px breakpoint value (i.e. smartphones as opposed to tablets), columns will be stacked — the components inside of them are rendered below each other as if they were not defined in columns.
Columns now support multiple nested columns which enables use cases like the following:

main.view.xml
<columns>
<column>
<heading>Column 1</heading>
</column>
<column>
<heading>Column 2</heading>
</column>
<column>
<heading>Column 3</heading>
</column>
</columns>

None
Version compatibility
column-gap
was introduced in version 4.86.1 of the JourneyApps Runtime.Optional
Type:
number
(a values in px)Default: 48 px
Specify the width of the gap between columns.
main.view.xml
<info>default column-gap</info>
<columns>
<column>
<heading>Column 1</heading>
</column>
<column>
<heading>Column 2</heading>
</column>
<column>
<heading>Column 3</heading>
</column>
</columns>
<info>column-gap="80"</info>
<columns column-gap="80">
<column>
<heading>Column 1</heading>
</column>
<column>
<heading>Column 2</heading>
</column>
<column>
<heading>Column 3</heading>
</column>
</columns>

Version compatibility
column-order
was introduced in version 4.86.1 of the JourneyApps Runtime.Optional
Type:
left-to-right
| right-to-left
Default:
left-to-right
Specify the order of the columns.
main.view.xml
<info>column-order="left-to-right"</info>
<columns column-order="left-to-right">
<column>
<heading>Column 1</heading>
</column>
<column>
<heading>Column 2</heading>
</column>
<column>
<heading>Column 3</heading>
</column>
</columns>
<info>column-order="right-to-left"</info>
<columns column-order="right-to-left">
<column>
<heading>Column 1</heading>
</column>
<column>
<heading>Column 2</heading>
</column>
<column>
<heading>Column 3</heading>
</column>
</columns>

Last modified 11mo ago