Build Unique Gallery Grid (Grid Custom Code)

1.) Add A Gallery.

Using ACF, add a gallery to a post type. Click HERE for how to do this.

2.) Insert Grid Custom Code.

At this point, you should have built a single post template in the Theme Builder and have a gallery assigned to each post of that post type. Add the Gallery Module to the single post template and scroll down to open up the Gird Settings section of the module and there you will see a black box that says Grid Custom Code. There you will need to insert code describing the arrangement of your images. To find this code click HERE to go to a website that enables you to build a grid layout. It should look like the image below.

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 code that you need to paste into the gallery module is now 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"

The last step is to copy and paste this code into the gallery module as shown below. Now my unique gallery is complete. Note that you can go back to this design website and build a different layout if you so desire.