display products like grid market does in twenty eleven

in Grid Market the products display in a grid fashion.. which is perfect.. in twenty ten they display in a list.. .like a blog... how could i make them display like grid market. .

  • DavidM
    • DEV MAN’s Mascot

    Hi mrmikeman,

    You can't by default, but there's an awesome member who released a plugin for MarketPress that provides a shortcode to display a grid in other themes. You'll find that in the following thread.

    Alternatively, you could take a look at how that plugin or how GridMarket achieves the grid and copy the code for use as you like.

    Hope that helps!


  • mrmikeman
    • Site Builder, Child of Zeus

    when i add more padding to #comments its pushes down and looks good, but i have a feeling that will change as i add products.. so i hope to find a better method to fix it

    im thinking the short code that displays the products on that page is not detected as content on the page not allowing the comments box being pushed down?

  • abdada
    • Flash Drive

    Oh, I see that now. I was looking at the individual item pages.

    Looks like a float/div error somewhere -- check to make sure you're closing all your div areas. Or try sticking a clearfix after you close the post div.

    </div><!-- #post -->

    <div style="clear:both;"></div>

    <div id="comments">

  • abdada
    • Flash Drive

    I'm not a big fan of that solution, I'm looking over your code right now to see what might be missing. If it works, great! But it's more of a kludge than a good solution.

    I'll post here if I find some flaw in your CSS or in your HTML.

  • abdada
    • Flash Drive

    I checked all your divs and they're perfect, so stick with the clearfix for now -- I can't imagine it will break anything on that page, but watch for it just in case.

    To spread the boxes further, edit this file:


    There's this section:

    #content .grid .product, #maincontent .grid .product{
    border:1px solid #eeeeee;
    margin:0 10px 10px 0;

    I bold-faced the line to edit, and italicized the specific number to adjust,

    Is that what you meant? Raise the 10 and it will increase spacing between the items.

  • mrmikeman
    • Site Builder, Child of Zeus

    hmm im trying to figure how to do that in my styles.css instead, dont know if that would work but if it would how might i do it in there cause id like to avoid editing the plugin for when it updates ill lose it if im dumb enough not to back it up

  • abdada
    • Flash Drive

    Unfortunately, you are loading grid.css AFTER styles.css, which will overwrite anything in styles.

    Do you have FTP access? If so, go to:


    Download the file grid.css and EMAIL IT TO YOURSELF.

    Then edit that file and edit the exact lines I told you to, then re-upload it to the same directory via FTP.

    Should be pretty easy! (If you have FTP access)

  • abdada
    • Flash Drive

    No worries, thanks for the rep.

    One thing to understand is that when you say 10px (the second number), you're bumping anything to the RIGHT of your div box 10 pixels. That means you'll end up with a 10px blank area all the way to the rightmost box -- annoying.

    One option is to do this:

    margin:0 5px 10px 5px;

    Setting the second and fourth margin to 5px will "center" the left and right margins to 5px (you can adjust it to any other number as long as they're both equal). This will at least CENTER the products nicely, leaving a 5 pixel (or whatever) space on the left and the right, with a 10 pixel space in between any two boxes.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.