Grid System for Contao4 based on CSS Grid
Add columns to your page content.
Contao Clickpress Grid uses CSS Grid and so less HTML is needed.
composer require clickpress/contao-clickpress-grid
or use the Contao Manager.
- Enable the prebuilt CSS Grid in your Contao page layout or generate your own CSS.
- Add a new content element from type "Gridset start" - "Gridset end" will be autogenerated
- Edit your column configuration in the "Gridset start" content element
- Place some elements between "Gridset start" and "Gridset end".
If you need two content elements in a column, wrap them between the elements "Column start" and "Column end".
If you want to customize your grid CSS follow these steps:
- Disable "Load Clickpress Grid CSS" in your page layout settings.
- Copy and edit the grid CSS (https://github.com/clickpress/contao-clickpress-grid/blob/main/src/Resources/public/clickpress-grid.scss)
- Add your new grid CSS to the page layout as "external CSS"
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>
Big thanks to rocksolid_columns for some parts of the module.