Styles
PAGEGRID uses a 12-column CSS grid by default, which can be easily customized. But you don't even have to use grid, flexbox or block elements also work. Or you might want to use a CSS framework? No problem! PAGEGRID makes no assumptions about your CSS code. This makes customization easy, whether you use the style panel or prefer to work in code.
Style Panel
PAGEGRID has an optional style panel to manipulate CSS properties directly on the page. By default, this is only enabled for superusers, but you can also give other users permission to use it. See permissions.
If you prefer to write the CSS code yourself, you can disable the style panel in the module settings.
Custom CSS code
It's recommended to load your custom CSS files after you render the styles from PAGEGRID, so you can easily overwrite the defaults.
Optionaly use PAGEGRID's auto loading of .css files from your site/blocks folder. This can be helpful to keep the CSS for your blocks organised. Learn more.
Wrapper styles
PAGEGRID uses a 12 column CSS grid as a default. But you can change it by overwriting the CSS.
/* all wrappers */
/* Use 6 equally sized grid columns */
.pg {
grid-template-columns: repeat(6, 1fr);
}
/* main wrapper */
/* optional set main wrapper to display block (default is grid) */
/* to only allow vertical dragging/sorting of direct children */
/* useful if blocks can have children */
.pg-main {
display: block;
}PAGEGRID uses CSS grid as a default, but you can also use "display: flex;" or "display: block;" if this makes more sense for your site.
Item styles
As a default dragged items will be placed manually on the grid. Manually placed items can overlap themselves. If you want items to only take the available space change the "grid-row-start" and "grid-column-start" properties of your grid items.
/* items */
/* set both properties to auto */
/* let grid items take the available space */
.pg .pg-item {
grid-row-start: auto;
grid-column-start: auto;
}
/* or set only grid-row-start to auto */
/* items can still be positioned freely on the columns */
.pg .pg-item {
grid-row-start: auto;
}
/* new items */
/* you can use this class to set the defaults for new items */
/* here we are overwriting the default size of grid items */
/* using this class makes sure you can still resize items with the PAGEGRID field */
.pg .pg-item-added {
grid-column-end: span 3; /* let new grid items span 3 columns */
grid-row-start: auto; /* you can also change the placement here */
}