Grid system

Veello Theme uses an excellent Bootstrap 5 grid system, which users worldwide have battle-tested for many years. It is a standard setup with 12 columns and a 32px gutter width. Since the grid is managed using particular content elements, you can use it everywhere, where the content elements are supported – articles, news, sections, etc. Moreover, those elements are also available as form fields.

There are several content elements and form fields that ease working with the grid:

Content element / form field	Description
Row	Opens the grid row with columns inside.
Row stop	Closes the grid row.
Column start	Opens the grid column.
Column stop	Closes the grid column.

Backend user interface

The new grid content elements are wrappers similar to the slider or accordion wrappers already present in the Contao core. Each column content element has a slight hint of how it behaves under different breakpoints. Note no buttons next to column stop and row stop elements – those are managed automatically.

This is how things look like by default:

Grid content elements appear as wrappers on disabled grid view.

The real revolution happens when you click the "Enable grid view" button at the top. After the page reloads, you will see an entirely re-designed list of content elements, visualizing how elements are arranged within a grid.

You can see a toolbar with buttons to switch between the different breakpoints just below the article details. The grid system is fully responsive so that you can adjust column width or visibility for every breakpoint individually.

Content element list with enabled grid view is much more intuitive.

Naturally, it is possible to create nested rows and columns, as shown on the image below:

The grid rows and columns can be easily nested in each other.

Row content element

The row content element is the primary grid content element and controls the columns inside it. In this place, you specify a number and layout of the columns of the default breakpoint (medium).

Hint

You can quickly create a row element using the "New row" button at the top of the page.

The number and layout of columns are managed from the row content element settings.

Column content element

Once you created a row content element, you can adjust the settings of each column inside it. The column settings are simple and narrow down to the column width and its offset.

The column width can also be adjusted from within the grid view using the plus and minus buttons.

The column content element has settings regarding its width and offset.

Grid settings

As with most of the things in Veello Theme, general grid settings are adjustable in the design settings:

You can change the grid gutter in design settings.

Backend user settings

For the backend users with limited access, you can restrict the backend view to one of the possible options:

No restriction: The user can enable/disable grid view.
Force grid view: The user always sees the grid view.
Force list view: The user always sees the list view (Contao default).

You can adjust this setting in the user group settings or the user settings.

A grid view can be forced per user group or user.

Toggle whole wrappers

The Contao backend UI is excellent but lacks one important feature. In version 1.1.0 of Veello Theme, we added the button to publish/unpublish the wrapper element and all its child elements. It works with all wrapper types: accordions, sliders, and grid content elements.