Single Column Row - Column Direction
Items stack downwards. You can add as many as you like. If you have lots of text, make the max content width ~900px. Leave it as default if you aren’t using text blocks.
Single Column Row – Row Direction
This is also a single column row. The difference is that this one has the row direction, instead of column (down) direction for stacking. If using this method, you’ll generally need to set the widths accordingly.
For this example, I’ve set the width of the text box here as 50% and the Size Parameter (Advanced) as “none” so that there is zero flex grow or shrink applied. You also need to make sure that you have set the justification correctly – otherwise things may not align as you expect. Use this method sparingly and when in doubt, nest two containers and use the multi-column row settings. Note that the max column width has been changed to 1260px to account for missing column padding.
Multi Column Row
This might look similar to the ‘single column row – row direction’ however it has one significant difference: the content in the two columns is inside it’s own container. For example, this container on the left has both a heading element and a paragraph element. In the single column row (row direction) example, the heading is actually added inside the paragraph/text editor element.
This method does create a bit more ‘div soup’ but it makes layouts a lot more predictable. To get two even columns of 50% each, simply set the width on the layout tab as ‘50%’. Make sure that the padding is set to ‘Multi-Column Row’ for the parent container.
Complex Layouts can be fun!
This is the second container!
Check this out, multiple containers can create fun custom layouts. Who knew containers could be so fun. You can customise how many columns next to each other by changing their width in the ‘layout’ tab. The sky is pretty much the limit in terms of what you can do, as long as flex box allows for it.
Another container in the same section. What fun!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
