Documentation's navigation
On this page
What is a multi-column layout?
The Layout box macro allows you to create a multi-column layout. This way, you can be more flexible in your design.
The rules
Inside of Layout boxes might be several more boxes, acting as columns. For the columns to be displayed correctly, three conditions must be met:
- The columns must be inside a wrapper Layout box.
- All Layout boxes acting as columns must be aligned to the left.
- Column widths and spacings between and around them must add up to 100% (or the total width you set up for your wrapper box).
Follow the instructions below to create your first two-column layout.
How to create a multi-column layout
Create a wrapper
Create a Layout box and click on Use box as a wrapper. This box doesn't need any other changes.
Create your columns
Create new Layout boxes inside your wrapper box. From now on, every new Layout box represents a column. Make sure to put your Layout box inside the wrapper box.
Set alignments and outer spacings
You need to set all your Layout boxes to float in the same direction.
Change "Alignment of the box" to left. Do this for all your columns.
Change Outer spacing. For a space between the columns, add a right margin (e.g. 0 2% 0 0) to all columns except the last one.
Calculate the column width
The formula for a multi-column layout is as follows:
(100% - outer spacings) / number of columns = column width
100% being 100% of the available space inside the document.
Outer spacings being spaces to the left and right of the columns. Either between columns or between a column and the document border.
Set the width of your columns inside the macro.
Style your columns
You can add background color, text color and inner spacing now. You can also add custom CSS classes, if your system administrator set up any.
You're done!
More examples
Link to this page: https://seibert.biz/linchpinessentials-multicolumn-layout