Grid of varying sized modules

Support
#1

Apologies for the general nature of this question:

I’m trying to create a page with rows of 1, 2, or 4 modules each (with 2 and 4 being locked as square aspect ratio) They can all stack in mobile but I would like to maintain a square aspect ratio.

The modules would be images with text on top

These will be linking to articles. I have not yet decided if I should use pages or posts (probably pages because I can style them)

What is the best way to create this? Rows in cornerstone? The Grid? Essential Grid? Some other plug in?

Advice on where to start would be greatly appreciated.

#2

Hello @mlc2475,

Thank you for a very detailed post information.

Are you inserting an image in each of the columns? You can actually do this by using sections, rows and columns. You can cannot create a perfect square though since the height of the columns will only depend on the total heights of the elements inside it which by the way vary depending on how wide is your content width. If you have a fixed content width then you may have a chance to have a perfect square.

You might want to check out this thread regarding equal heights which is also might help you:

Hope this helps.

#3

Yes there will be an image in each of the columns with text overlayed. The main thing that I am trying to figure out is how to lock the modules to be squares no matter how it gets sized (ie; when the width changes, the height changes by the same amount.) It’s less of a concern how the image cuts off. However I would implement responsive text on top of the image.

#4

Hello @mlc2475,

As I have mentioned in my previous reply, perfect squares may not be able to achieve with section, rows and columns easily. I would recommend that you use the Essential Grid or The Grid plugin. You can get in X/Pro > Validation > Extensions section.

To know more about this plugin, please check this out:

Hope this helps.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.