Skip to main content

Grid

The theme is based on Spectre CSS, which among other things lets you show elements side by side and, at the same time, in a single column on mobile devices.

Place the content container

To show two text elements side by side, for example, first add one element of type Contao Themes (content container start) and one of type Contao Themes (content container end).

Place the content container Place the content container

The element of type Content container start needs the col attribute .columns under Advanced CSS classes.

Add the col attribute columns Add the col attribute columns

Place the content elements

Between the wrapper elements, place the elements you want to show side by side. Select the col attribute .column under advanced CSS classes.

Add the column class Add the column class

You can also define more classes, e.g. column widths for certain resolutions or column gaps. You find more information in the Spectre documentation under Flexbox grid and Responsive.

Grid classes Grid classes

Example

Grid example Grid example