Creating a column grid on a page

Forums » WordPress » Mantra » How To

  • Author
    Posts
  • June 20th, 2013 at 18:52 #7979
    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

    June 21st, 2013 at 13:46 #8011
    Zed
    Cryout Creations mastermind

    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.
    July 4th, 2013 at 02:58 #8539
    PaulieG

    Cheers Zed. That worked a treat.

    October 31st, 2013 at 12:14 #13301
    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?

    November 5th, 2013 at 14:21 #13405
    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
Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Creating a column grid on a page’ is closed to new replies.