A popular stylistic device is the division of content into columns. Here the use of “grid systems” has become established. The available area is divided into a fixed number of columns. A fixed outer distance is defined once for the total width and then between the individual columns of the grid itself.
For example, if you want to display two columns in a “12-column system”, you must assign six grids to each of your two areas. This assignment is done via CSS classes.
Among others, there are “12-column” or “16-column” implementations. Some are “pixel-based”, others “percentage-based”, and the spacing width can also vary with different systems. Ultimately, it is CSS information in order to display a defined HTML structure accordingly.
The first solutions were implemented via CSS-float. The advantage is the support of older browser versions. Realizations via CSS-flexbox followed and meanwhile the CSS-grid property itself exists. This is supported in current browser versions.
Often you will find the term “responsive” grid. This is not only the variable width adjustment of the individual columns depending on the total width, but you can control the number of columns per device or rather viewport width yourself. For example, the content can be displayed as “4-columns” on a desktop, “2-columns” on a tablet and just “1-column” on a smartphone.
The total width of 960 pixels with two “breakpoints” at
< 980 Pixel and
< 768 Pixel is fixed.
The CSS classes available are
The CSS file can be found in the directory
There you can also see under which conditions the spacing is set:
mod_articleif they contain a class starting with
The Contao grid can be integrated via your page layout in the section CSS framework > 12-column grid.
For “2-column” display of two content elements of type “text” you can enter the CSS class
grid6 in the
area Expert Settings > CSS ID/Class. Above 768 pixels the content elements are always displayed in “2 columns”
and below 768 pixels in “1 column”.