[PaulieG]

Help! I am trying to create a column grid on a page. I’d like to be able to insert either a picture or code or both in each slot but don’t know how to do it. In a perfect world i’d like it to be 3 columns wide and unlimited in dept (height). See example of what I’m looking to achieve here.http://www.dessign.net/gridportfolio/ Is this possible with Mantra? Thanks in advance

[Zed]

You could try using the multiple columns shortcode to achieve that:

[mantra-multi]
[mantra-column width="1/3"]row 1, col 1[/mantra-column]
[mantra-column width="1/3"]row 1, col 2[/mantra-column]
[mantra-column width="1/3"]row 1, col 3[/mantra-column]
[/mantra-multi]
[mantra-multi]
[mantra-column width="1/3"]row 2, col 1[/mantra-column]
[mantra-column width="1/3"]row 2, col 2[/mantra-column]
[mantra-column width="1/3"]row 2, col 3[/mantra-column]
[/mantra-multi]

and so on…

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[PaulieG]

Cheers Zed. That worked a treat.

[Irene]

Hi, I’m trying to create a grid too rather than using a table as I want the responsiveness ie col 2 falls under col 1 on resizing.

It seems however not to do a clear on the [cryout-multi] block and I need this to happen (like a row in a table). I have images in col 1 and text in col 2. If the text in col 2 is shorter than the height of the image, the next [cryout-multi] doesn’t start below the image, but instead falls under the text in col 2. In other words there’s no clear=both it seems on the [cryout-multi] block.

How can I ensure that each [cryout-multi] block starts on a new line?

[ydrea]

ran into the same problem – the second row dodn’t work. don’t know if that’s a bug, but i Finally managed to make a workaround by inserting another empty column between two rows.

here is the code:

[mantra-multi][mantra-column width="1/3"]
image 1
[/mantra-column]

[mantra-column width="2/3"]
text 1
[/mantra-column][/mantra-multi]

[mantra-multi][mantra-column width="1/3"]

[/mantra-column]

[mantra-column width="2/3"]

[/mantra-column][/mantra-multi]

[mantra-multi][mantra-column width="2/3"]
text 2
[/mantra-column]

[mantra-column width="1/3"]
image 2
[/mantra-column][/mantra-multi]

[Author]

Posts