Styling a 3x3 grid with Ditto generated content - for E-Store

Our goal is a look like this -- http://www.a2armory.com


Except the 9 content-boxes in the 3x3 grid will be generated from a single Ditto call.


The Ditto call looks like this:
[[Ditto? &startID=`2` &hideFolders=`1` &depth=`100` &tpl=`miniProduct` &display=`9` &paginate=`1` &sortBy=`productPrice` &sortDir=`DESC` &paginateAlwaysShowLinks=`0` &debug=`0` &extenders=`request` &tplPaginatePage=`page` &tplPaginateCurrentPage=`currentPage` &tagDelimiter=`,` &tagData=`productFilters` &tagMode=`onlyAllTags` &tags=`mannequins,children`]]


The ditto call uses a simple .tpl that just contains a thumbnail image and a little bit of text about each product.


The .tpl is this:
<div class="mini_product">
<a class="greylink" href="[~[+id+]~]">
<img src="/assets/phpThumb/phpThumb.php?src=/[+productImage+]&amp;w=150&amp;h=150" />
</a>
<ul>
<li>[+title+]</li>
<li>$[+productPrice+]</li>
</ul>
</div>


I am wondering if there is a way to have the 9 blocks of content correctly populate the 3x3 grid, first across, then down and across in the middle row, then down and across in the bottom row.


I am open to any type of CSS or HTML ideas -- I was planning to use a 3 column CSS grid generated here - http://www.pagecolumn.com/3_col_generator.htm


Would have liked to use a 5 column CSS grid, but I don’t think there’s any way to instruct Ditto to move its output into the next column div.


there may be something better. Maybe use the 3-column grid and tweak the sizing of the .tpl so that no more than 3 items fit across? Or is there a way to tell Ditto to add a line break after 3 items?


Thanks!

If I understood you correctly, you don’t need divs to create a grid. You can just use CSS to float the list items (li) of an unordered list to create your grid. If you play around with the CSS width properties for the container ul and the li you can control the number of columns you want per row.

If you output your Ditto results as an unordered list you can then float them, play around with the padding to space the grid column, etc. An example is given in the ditto pages - though it calls this columns, it is basically a grid. Here’s the link: http://ditto.modxcms.com/examples/columns.html

cheers/k