How to make 3×3 grid of content?

  • Resolved burntsun

    (@burntsun)


    5 years, 1 month ago

    I would like to create a 3×3 grid of images, each image linking to a different URL. I would like this to be responsive, so that on mobile, it is simple a stack of images. The layout is very similar to what “AB Post and Page Grid” provides, but for linked images rather than posts.

    • “AB Container” is just a container, it doesn’t really have layout options.
    • “AB Advanced Columns” doesn’t seem to let you do a 3×3 grid, you can only create columns along one dimension (at least in desktop view).
    • “AB Layouts” just offers templates of other blocks, it doesn’t offer the 3×3 grid that I’m looking for (unless you count “AB Testimonial”)

    I’ve tried Atomic Blocks, Block Gallery, CoBlocks, Stackable, Ultimate Addons for Gutenberg by Brainstorm Force, and none of them can do what I’m looking for.

    • This topic was modified 5 years, 1 month ago by burntsun.
Viewing 2 replies - 1 through 2 (of 2 total)

  • Hey there, I went ahead and threw together a quick demo video to show how you could put together a image gallery similar to what you described.

    Link to the Page: https://genesismule.wpengine.com/sample-page/

    I used an Atomic Blocks Container Block and nested three AB Advanced Column blocks inside of the Container Block. Each of the three Column blocks then have three image blocks with all equally sized images nested within them.

    Here is a short video demo’ing that setup:
    https://www.loom.com/share/6c112ea5d022448a89b66e72480c9e05

    Thread Starter burntsun

    (@burntsun)

    Wow! Thank you for going to the effort of even making a video!

    That solution does look good. I guess I was worried that if I did this, then on a mobile device, it would end up looking like this:

    1 2
3
4 5
6
7 8
9

    However, it seems that the 3-column layout is always used, except for in mobile phones, at which point, only 1 column is used.

    Thank you! This is the best solution I’ve found so far.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to make 3×3 grid of content?’ is closed to new replies.