This plugin extends the existing Gutenberg Group and Post Template blocks by introducing responsive grid layout controls. This allows for a more customizable grid system that can adapt to various screen sizes.
Features
Grid Control (PRO)
Adds grid column controls for different devices directly within the “Group” and “Post Template” block.
Custom Breakpoints (PRO)
An admin settings page to define custom breakpoints used for each responsive design. Simply Navigate to Settings > Grid Variation Options in the WordPress dashboard to access the admin settings page. From there, you can customize the breakpoints for the responsive grid controls.
Fields:
- Tablet: Minimum screen width (in pixels) for tablet grid layout.
- Mobile: Minimum screen width (in pixels) for mobile grid layout.
Installation
- Upload
grid-variation-optionsto the/wp-content/plugins/directory. - Activate the plugin through the ‘Plugins’ menu in WordPress.
- Simply navigate to any page/post editor and you can adjust the responsive grid via block settings (or via custom CSS classes if you’re a free user).
- (Optional) You can also modify the grid breakpoints from the admin dashboard (PRO).
How to use the free version?
Free users do not have access to the UI controls for changing grid settings and cannot customize breakpoints via the admin dashboard. They can utilize the predefined CSS classes for grid control as specified below.
After selecting the “Grid” variation for a Group or Post Template block, users can adjust the number of columns for different devices via custom CSS classes.
| Breakpoint | CSS Class | Description |
|---|---|---|
| Desktop | desktop-grid-repeat-1 | You can only set the maximum of grid columns to 12 desktop-grid-repeat-12 |
| Tablet | tablet-grid-repeat-1 | You can only set the maximum of grid columns to 12 tablet-grid-repeat-12 |
| Mobile | mobile-grid-repeat-1 | You can only set the maximum of grid columns to 12 mobile-grid-repeat-12 |
Leave a Reply