The above diagram will assist styling of your Dyggrid using the class and css tools documented below.
Class fields
Additional classes entered to these fields are added directly to the class attribute and should be separated by spaces with no prefixing ‘.’. The fields map as:
- Wrapper class: .dyg-post-grid-wrapper
- Cell class: .dyg-post-grid-cell
- Image class: .dygpg-image
Theme presets will add classes to these fields. Deleting them is one way to remove the styling applied by the preset (the other ways being undo or reset).
CSS
When you edit a Dyggrid for the first time, or reset the grid, a default template of css selectors prefills the css textbox consistent with the illustration above.
The selectors are qualified by the id supplied in the shortcode and are unique to this grid, so if you include multiple Dyggrids on the same page, the styling will not effect other grids.
It is possible to re-use the same grid by adding another shortcode using the same id. In this case, the styling will effect all matching grids (this is true of all editor settings).
You can enter any other css you like here but beware, if it is outside the supplied selectors it can impact the entire page.
The css is included within a style block within the grid wrapper directly below the media queries generated by the cell layout settings, so will have precedence over things like margin, widths, gaps etc.
No syntax checking is performed on the css Apart from sanitising / escaping, the textbox is echoed as entered. Syntax errors are likely to result in unpredictable results.
If you prefer, the template can by copied into a separate .css file.