clickpress/contao-clickpress-grid

Grid System for Contao based on CSS Grid

v2.2.3 2025-04-07 12:54 UTC

Requires

• php: ^8.1
• contao/core-bundle: ^5.3

Requires (Dev)

• contao/easy-coding-standard: ^3.1
• contao/manager-plugin: ^2.3
• phpunit/phpunit: ^9.3
• symfony/phpunit-bridge: ^5.4

Conflicts

• contao/manager-plugin: <2.0 || >=3.0

LGPL-3.0-or-later

• Stefan Schulz-Lauterbach
• Martin Auswöger
• Jannik Nölke

README

Grid CSS for Contao

Add columns to your page content.

Contao Clickpress Grid uses CSS Grid and so less HTML is needed.

Installation

composer require clickpress/contao-clickpress-grid

or use the Contao Manager.

Usage

1. Enable the built-in CSS grid in your Contao page layout settings or create your own custom CSS.
2. Add a new content element of type "Gridset Start". The corresponding "Gridset End" will be added automatically.
3. Configure your column settings in the "Gridset Start" element.
4. Place your desired content elements between the "Gridset Start" and "Gridset End" elements.

If you need multiple content elements within a single column, wrap them with "Column Start" and "Column End" elements.

Customized CSS

To override the default grid styles:

1. Uncheck "Load Clickpress Grid CSS" in the page layout settings.
2. Copy and customize the clickpress-grid.scss file (https://github.com/clickpress/contao-clickpress-grid/blob/main/public/clickpress-grid.scss)
3. Include your custom CSS as an external stylesheet in the layout settings.

Inside

This is the result of a 40% 30% 30% setting on desktop. So, three columns will be displayed in a row. The fourth column will be placed in a new row, automatically.

<div class="grid_desktop_40_30_30 ...">
   <div class="ce_text">...</div>
   <div class="ce_text">...</div>
   <div class="ce_image">...</div>
   <div class="ce_text">...</div>
   <div class="ce_text">...</div>
</div>

Credits

Big thanks to rocksolid_columns for some parts of the module.