Columns

Columns is a versatile layout item in Nyla. Columns help you place content side by side (or stacked on mobile). Each column has its own Content Source which can contain any Content Items.

Columns are available in the Layout Section of Content Blocks. Adding Columns will automatically add two children Column Content Items, and you can readily add more if you want by clicking the “+” button to the right of the parent Column.

Columns and Column both have:

Only column content items can be added as children to Columns. Columns can be rearranged using the Responsive settings.

As Columns is primarily a layout container, it has limited design settings.

Set the default column width. If no column width is set on children Column, this width will be used.

Add gutters between the Columns.

You can add any Content Item within a Column, making it an extremely flexible building block. Each Column has a Content Source, which can be styled and arranged in the design settings.

The Content Block inside a Column means that you can very precisely add layout and directionality to the Content Items within a Column. See Content block for more details on how to use this setting.

Column width

Set the width of the individual Column. Setting no value will set the Column to fill any remaining space.

Fit column to site grid

Fit Column to site grid is specifically used when you have 2 Columns. It sets the content to respect the site width and margins set in Spacing styles. This is a great way to respect the site grid while having one column being full site width.

In the example below the left Column has been set to ‘fit to site grid’. Though the Section and Columns takes the full width of the site, the Column with the setting keeps the content aligned to the global spacing.