The ui/Theme-Builder makes creating beautiful responsive layouts in Joomla! drag & drop easy. But a lot of people get stuck creating more complex layouts. This where you want multiple rows of different numbers of columns, but all within the same ‘section’.

How to create complex section column structures.

Click the column handle icon on the right in the section. Here you can choose between predefined columns or enter your own column widths.

Use column widths from UiKit Width component. For example, type "1-2" for half the available width or "auto" for an automatic width of the column depending on the content. Separate the column widths with a ";".

Here’s a very quick example I’ve put together to show you what I mean:

• 1 column for e.g a headline
• 2 columns for e.g content ("2-3" - The element takes up thirds of its parent container and "expand" - The item expands to fill up the remaining space of the grid container.)
• 1 column for e.g a button or what ever...

To get this column structure type in 1-1;2-3;expand;1-1. Thats all ;-)