With DonDivi Grid, you can define column and row behaviors, automatically or manually place items, control column/row spans, and embed custom or layout-based content in each cell.
Installation
Install and activate the Divi Theme.
Go to WordPress Dashboard → Plugins.
Click on the Add New Plugin button.
Click on the Upload Plugin button.
Choose the dondivi-builder.zip file.
Click on the Install Now button.
When the builder is installed, a new module named DonDivi Grid appears in the Divi Builder.
Overview
This module creates custom grid layouts in your Divi posts and pages. You can define columns, row behavior, and easily place items in each cell. Grid items can contain either Divi Layouts or custom content.
Add DonDivi Grid
Click on the Add Module button.
Search for DonDivi Grid.
Click on it to add it to your page.
DonDivi Grid Settings
Content tab
Grid:
Columns: Decide how many columns the grid will have. All columns have equal width.
Rows: Leave this field empty or enter the number of rows you want your items to occupy, potentially. For instance, if you want a grid item to span two rows, make sure this setting can accommodate it. Keep in mind that the final row count depends on the number of items you have and their placement.
Rows Growth:
Auto (default): The row height adapts to fit the tallest item in that row.
Equal Heights: All rows share the same height.
Gap: Set the gutter between rows and columns (default 10px).
Grid Items Preview: This feature provides a real-time preview of how items are arranged in the grid, which is particularly useful when some items span multiple columns or rows.
Design Tab
Grid Items:
Background Color: A responsive field that applies a background to all items. Individual items can override it.
Border: Add borders or rounded corners. This can be overridden per item.
Padding: Default padding for grid items, also overridden individually if desired.
Text Alignment: Align text within each grid cell.
Grid Items Text: Style the title and body for items that use custom content.
Sizing: You can choose the size of the DonDivi Grid module, including width, max width, module alignment, and more.
Spacing: You can adjust the spacing of the DonDivi Grid module, including outer margin and inner padding.
Border: Add custom borders or rounded corners to the entire DonDivi Grid module.
Box Shadow: Apply shadow effects to highlight the entire DonDivi Grid module..
Filters: Select the filters for the DonDivi Grid module.
Transform: Select the transform styles for the DonDivi Grid module.
Animation: Select the animation for the DonDivi Grid module.
Add a DonDivi Grid Item
When you add the DonDivi Grid module, it will not contain any menu items by default.
Open the DonDivi Grid module's settings
Click on the Add New Item button
Single DonDivi Grid Item Settings
Content tab
Grid Item:
Content:
Custom: Allows you to create a custom element that contains a Title, Body, and a button.
Image/Icon: Decide whether to show an image, an icon, or none. Responsive field.
Title: Add an optional title.
Body: Main text.
Button: Adds a button text. Needs a Button Link URL to display.
Divi Layout: Allows you to select any Divi element that has been saved to Divi → Divi Library.
Important Note: We do not recommend embedding a layout that contains another DonDivi Grid module, as this can cause style conflicts.
Design tab
Grid Item:
Position
By default, each item spans exactly one column or row cell.
Column Start: The column where the item should begin. If not set, it is automatically placed.
Column Span: How many columns the item spans (default is auto, meaning 1).
Row Start: The row where the item starts (auto if not set).
Row Span: How many rows the item occupies (default is auto, meaning 1).
Image & Icon: This option group appears if the Grid item's Content is set to Custom and if the Icon or Image options are being used in the Image/Icon option.
Image/Icon Width: Set the Image or Icon's width.
Image/Icon Placement: Choose the Image or Icon's placement:
Top (default)
Left
Image/Icon Offset: Choose the amount of space between the Image/Icon and the body text.
Image/Icon Margin: Choose the amount of space the Image/Icon should have. The space will be applied outside the element.
Image/Icon Padding: Choose the amount of space the Image or icon should have. The space will be applied to the element.
Title: This option group appears if the Grid item's Content is set to Custom. It allows you to style the Grid item title.
Body: This option group appears if the Grid item's Content is set to Custom. It allows you to style the text in the Grid item body.
Image & Icon Animation: This option group appears if the Grid item's Content is set to Custom and if the Icon or Image options are being used in the Image/Icon option:
Enter Effect: Choose how the icon/image appears (Fade, Slide, Zoom, etc.). The default is None.
Animation Intensity: Controls how strong/subtle the effect is (default 100%).
Opacity: An extra fade layer if Fade is not used.
Duration: Choose the duration of the Enter Effect (the default is 1000ms).
Button: This option group appears if the Grid item's Content is set to Custom. It allows you to style the Grid item button.
Sizing: You can choose the size of the DonDivi Grid item, including width, max width, module alignment, and more.
Spacing: You can select the spacing of the DonDivi Grid item, including margin (outer spacing) and padding (inner spacing).
Border: Add custom borders or rounded corners to the Grid item.
Box Shadow: Apply shadow effects to highlight the Grid item.
Filters: Select the filters for the DonDivi Grid item.
Transform: Select the transform styles for the DonDivi Grid item.
Animation: Select the animation for the DonDivi Grid item.