Working With Columns

The column component allows advanced control over the structure of an article, enabling content to be organised in up to four columns. These columns act as the parent / containing elements for text and media components, each of which can be placed into a column.

To edit the properties of a column, a column component must exist on to the canvas. You can learn how to add components here.

Managing column properties

Once a column is on the canvas, the properties can be changed by hovering the column and clicking the 'edit' button next to the column block.  

This will display the properties menu. The options available will depend on if you're working with a single column, or two/three/multi column:

Apply a Custom Style Block

A column component is required to use a ' Custom style block'. You can learn more about Custom Style Blocks here.

Full Bleed

Full Bleed only applies if a Custom Style Block is attached to the column. With one attached, this option will full bleed the style block's background image or colour.

Container Width

Container Width allows control over the width of the container element on the page, by default this is 100%.

Controlling the column split

By default a new column is equally split, 50% | 50% for a 2x column block, 33% | 33% | 33% for a 3x column block etc.

It's possible to change how the columns are divided using the 'Column Split' menu.  By changing the values, the column within the article will respond immediately and any content within them will adapt to the new width settings.

Alignment

Controls the alignment of single columns. Column must have a container width below 100% for alignment changes to take effect.

Controlling the collapse action

By default, columns collapse on mobile devices, however it is possible to override this default action.  This is useful when there is no benefit in columns collapsing on a smaller screen, for example: A 3x column component used to display a number of logos.

• To prevent a column component collapsing on a mobile, select the 'Collapse action' menu and choose 'Never'.
• To make the column collapse on tablet portrait orientation, select 'Tablet Portrait' option.

Multi-columns

Defining the number of columns you need is great if the amount of content to be placed into each column is known. However, when the amount of content is unknown, it may be more useful to make use of a multi-column layout.

With multi-columns, you can create a print-inspired layout that will automatically adapt beyond a fixed structure.  A multi-column will make calculations to automatically wrap and balance content into tidy columns.  Once the browser cannot fit at least two columns as wide as the column-width then no columns will appear and the layout will return to a single column layout.

The gif below demonstrates how the browser releases the columns and drops the gap when the browser width narrow. 

Multi column - Browser support

Multi-columns have good browser support (IE10+) and even if your favorite browser doesn't support multi-column layouts, keep in mind that they degrade gracefully into a single column layout. A multi-column layout cannot break, it can only become a single column layout.

Column Ordering

When columns collapse (i.e on a mobile device), the content will appear in the order of its column position, from left to right.  While this is usually fine, in some causes it is important to be able to control in what order column content appears on mobile devices.

Canvasflow gives you the ability to control this order by switching from the 'Default' to 'Mobile First' option.  When the 'Mobile First' order is applied to a column, the order of the content will be reversed when viewed on a desktop or landscape tablet for example.

It is important to remember that because Canvasflow is built on a mobile first framework, when using ' Mobile First', the order of the content within columns should represent the order in which you want them displayed on mobile devices.