Grid

These fields will allow you to create the custom grid.

A grid is made of columns and rows, and the space where we place the grid items are called grid cells, which are the “single units” or the “smallest units” of the grid.

As we are adding new Grid Items, they are being placed one into each individual grid cell by the auto-placement algorithm (from left to right).

When there are no columns available in the row (there is no room for new grid Items), they will be placed in a new row.

For this reason, you will only need to set the grid columns, but we are offering the grid row field so you can make a grid item to take up more than a row in order to create grid areas.

A grid area is one or more grid cells that make up a rectangular area on the grid.

As a result, the number of rows will depend on the grid item count and how you place them (the grid areas).

Content Tab > Grid > Columns

This field will allow you to define the columns of the grid.

The grid columns will be equals in width. As a result, if you define two columns, there will be two grid cells per row, taking the half width of the column each.

This field is responsive and we recommend that you use a mobile-first approach.

Content Tab > Grid > Rows

Leave empty or enter the number of rows where a grid item should be placed. For example, if you want a Grid Item to have the ability to take up n rows, enter n here.

In other words, you are not setting here the final grid rows count, but the rows that you want to be used by a grid item.

As mentioned before, the final rows count will depend on the grid items count and their dimension inside the grid.

Content Tab > Grid > Rows Growth

This will control the grid cell height.

If you want the grid cells height to be adapted to the grid items height  leave this field as is (auto).

This way the row height will be equals to the highest Grid Item that is located in the same row.

On the other hand, if you want the grid cells height to be equal for all the grid rows, choose the Equal Heights option.

Content Tab > Grid > Gap

This will define the size of the gap (gutter) between the rows and columns.

Default is 10px.

Content Tab > Grid > Grid Items Preview

Here you will be able to preview how the grid items are placed in the grid, which can be very convenient when using grid areas (grid items that takes up more than a single column/row) .

Design Tab > Grid Items > Background Color

This responsive field will allow you to change or remove the grid items background color. You can override the background color of specific grid items in the grid item settings modal. 

Design Tab > Grid Items > Border fields

Here you can add custom borders to the grid items, as well as create rounded corners and the ability adjust the border radius of all four corners individually.

This can be overridden in the grid item setting modal as well.

Design Tab > Grid Items > Padding

This fields will allow you to set the grid items padding.

Same as the other fields in this toggle, the padding can be overridden in the grid item settings modal.

Design Tab > Grid Items > Text Alignment

This field controls how the text is aligned within the grid items.

Design Tab > Grid Items Text

This toggle fields will allow you to style the grid items title and body. The title and the body will be available when adding custom content to the grid item.

These styles will be applied to all grid items that display custom content.

Same as the grid items background color, border and padding, these styles can be overridden in the grid item settings modal.

Grid Item

A grid item is the element that you place in the grid. It will take a grid cell (or several grid cells, creating a grid area).

You can add as many grid items as you want and they will be placed in grid cells. Grid cells with no grid items are called empty cells.

In order to add a new grid item, click Add Grid Item. A new modal called Grid Item Settings will appear where you will be able to customize the grid item.

A grid item can display either a Divi Layout or custom content.

Let’s now break down this modal fields.

Content Tab > Content

You can display either custom content or a Divi Layout from your Divi Library.

If you select the Divi Layout option, a new select field will appear with the available Divi layouts.

Disclaimer: Divi messes up the styles when injecting a module inside the same module, as explained here. For this reason, we recommend that you don’t select a layout that includes a DonDivi Grid module.

Design Tab > Grid Item > Position

By default, a grid item will take up one single grid cell.

Column Start

Here you can set the column where the grid item should start. If not the auto-placement algorithm will assign the grid item position. We recommend that you leave the grid algorithm to place the grid item when in doubt.

Column Span

Here you can set how many columns the grid item should take up. Default is auto (one column)

Row Start

Here you can set the row where the grid item should start. Same as the column, we recommend that you leave the grid algorithm to place the grid item when in doubt.

Row Span

Here you can set how many rows the grid item should take up. Default is auto (one row).

This field comes with responsive options. Meaning that you will have the ability to set different grid areas on different devices.

Design Tab > Spacing

here you can control the grid item margin and padding.

Design Tab > Border

Here you can add custom borders to the grid item, as well as create rounded corners and the ability adjust the border radius of all four corners individually.

Design Tab > Grid Item > Box Shadow

Here we offer several options to highlight the grid item with a shadow

Custom Content

If you chose to display custom content (default option), the following fields will appear in order to allow you to add and style the grid item custom content.

Content Tab >  Content > Image/Icon

You can choose here whether an image or icon should be displayed in the grid item.

Default is none and this field comes with responsive options, so you can display different content in different devices. You can even display the content for specific devices only!

If you select either an image or an Icon, a new toggle called Content Image & Icon will appear in the design tab (which we will document later).

Content Tab > Title

This field, that comes with responsive options too, will allow you to display a title to your content.

The responsive options will let you choose different titles for different devices. You can even choose which devices should display a title!

Also, you can enter a URL in the Title Link URL field in case you want the title opens a destination URL. You will be able to also choose whether the URL should be opened in the same tab or not.

Content Tab > Body

Here you can add the main content. This field offers responsive options too, which is very cool and helpful when it comes to tooltips.

You can even choose which devices should display the body!

Content Tab > Button

Add a text here if you want to display a button. This will be the button text.

This field, same as all the custom content fields, comes also with responsive options. Meaning that you can choose different content for different devices. You can even choose which devices should display a button!

Note: You need to enter a URL in the Button Link URL field so that the button is displayed.

Design Tab > Image & Icon > Icon Color

This responsive field will allow you to set a custom color for the icon.

Design Tab > Image & Icon > Image/Icon Width

This responsive field will allow you to set a custom size for the image or icon. Default is 50px if you selected an icon and auto in case you are displaying an image.

Design Tab > Image & Icon > Image/Icon Placement

This responsive field will allow you to choose whether the image or icon should be displayed above the tile, body and button (default) or should be placed at the left.

Design Tab > Image & Icon > Image/Icon Alignment

This field will align your image or icon to the left, right or center when you are displaying the image or icon above your content. Otherwise, it will vertically align the image or icon.

This field, same as all the custom content fields, comes with responsive options.

Design Tab > Image & Icon > Image/Icon Offset

This responsive field will allow you to set the distance between the image (or icon) and the content (title, body and button).

The default offset is 20px.

Design Tab > Image & Icon > Image/Icon Margin & Padding

Finally, you can add some padding or margin to the icon or image.

Design Tab > Content Text

These fields will allow you to style the title and the body text. For the title you can choose the heading level.

For both of them (title and body) you will be able to style the font, font size, font color, letter spacing, etc.

Design Tab > Content Button

These toggle fields will allow you use custom styles for the button and will let you to align it to the left, right or center of the grid item.

Advanced Tab > Custom CSS > Image/Icon

Need further customization for the grid item image (or icon)? Enter your custom CSS here.

Advanced Tab > Custom CSS > Title

Here you can enter additional CSS for the grid item title.

Advanced Tab > Custom CSS > Body

Finally, you can enter additional CSS for the grid item body as well.

Animation

You will be able to add animations to the grid item image or icon, as long as you are displaying custom content with either an icon or an image.

In order to add an animation, we offer the DonDivi custom effects in this module.

Image & Icon Animation > Enter Effect

You can choose an effect here. If so, the image or icon will be animated when entering into the viewport.

Default is none, meaning that no DonDivi effects will run.

These are the available enter effects:

Fade

Slide Down

Slide Up

Slide Left

Slide Right

Zoom

Image & Icon Animation > Enter Effect Animation Intensity

Here you can choose how subtle or aggressive your enter effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Image & Icon Animation > Opacity

You can add opacity to the selected effect.

Note: this will not be aplicable if you have selected the fade effect for obvious reasons (the fade effects animate the opacity).

If you enable this field, a new field will appear called Opacity Intensity, where you will be able to choose how suble or aggresive the opacity will be. Default is 100%.

Image & Icon Animation > Duration

Finally, you can set the effect duration in miliseconds. Default is 1000ms.

Troubleshooting

Here you can find solutions to some issues that you might run into when using the DonDivi Grid module.

The grid has more columns that expected

Problem: A two-column grid is rendered, but I have defined one column only in the settings.

Possible Cause: You may have set column span to your grid items. If you have a one-column grid and you set that one grid item should take two columns (column span 2), you are actually creating a two-column grid, regardless of the column count that you have set in the settings. This is the grid expected behavior.

Solution: If you have set n columns and the grid is rendering more than n columns, please go over the column span values of the grid items. Chances are that you have set a grid item to take two (or more) columns for desktop (column span 2), you have changed to the mobile view, but you haven’t changed the mobile value yet. As a result, the grid item will still be taking two columns, regardless of the mobile column count that you have previously set in the settings.

For your convenience, and from DonDivi Builder 1.1 on, we will show the column span value in red color if we detect that the column span value for that device is greater than the columns that you have set for that device.