Skip to main content

Build Unique Gallery Grid (Grid Custom Code)

Divi Machine allows you to build your own unique gallery grid layout for our Gallery/Slider module as shown below.

info

We have a step-by-step tutorial on How to Create Custom Grids in Divi Using Divi Machine) on the Divi Engine blog which may also be helpful.

Using ACF, add a gallery to a post type. Instructions for ACF Free and ACF Pro can be found at these links.

Step 2: Create your Custom Grid​

To create this code we will use a free online tool located HERE called Layoutit!.

Imagine that the entire white space of blocks is going to be your gallery of images. Click on a block, type "mod 1" and save the block. one "mod" represents one image in your gallery.

Click on a block again, but this time try to make it bigger like in the image below. Type "mod 2" and save the block. The second image will therefore take up four blocks of "mod 1" size.

For "mod 3" I am going to surround two blocks, one on top of the other.

To end off I create two more blocks named "mod 4" and "mod 5" and then save.

The last step is to copy and paste this code into the Gallery/Slider module which is found under the phrase, "grid-template-areas:" In my example it is:

"mod-1 mod-2 mod-2"
"mod-3 mod-2 mod-2"
"mod-3 mod-4 mod-5"

Step 3: Insert Grid Custom Code.​

  1. Add or Edit the Gallery/Slider Module.
  2. Scroll down to open up the Grid Settings section.
  3. Paste the code from the previous step into the Grid Custom Code setting.
  4. Match the gallery to that code, using the checks below.

warning

The layout breaks when these two counts do not match the code.

  • Number of images. Use the same number of gallery images as named areas in the code. The example uses mod-1 through mod-5, so the gallery needs 5 images. If the field has more photos than that, set Image Count in the Gallery/Slider module to that number so only those images render. An extra image has no area to sit in, so it stretches across the grid and the other images collapse.
  • Desktop columns. Set Columns to the number of cells in each row. The example has 3 cells in every row, so set desktop columns to 3. A row such as "mod-1 mod-1 mod-1 mod-2 mod-2" has 5 cells, so set desktop columns to 5. A mismatch collapses the columns and one image fills the width.

Video Tutorial​