New Post: Displaying List Items In Grid

Hi.

I am using SPServices to display a list in a page viewer web part in SharePoint. This works fine and the list items are displayed row by row.

I have added an icon to the list in SharePoint which has a URL also. An end-user will be able to tap this like an app icon.

The problem I am facing is how to loop through my list using SPServices but to display in a grid layout instead of row by row. e.g. a Width x Height grid (10 icons by 10 icons grid or 10 x 20 items vertically). The grid should never exceed the max number of items (10) in width but can expand vertically.

Is this possible to show list rows in a block/grid layout?

Here is the code I using so far but this only displays row after row:
<script type="text/javascript" language="javascript"> $(document).ready(function() { $().SPServices({ operation: "GetListItems", async: false, listName: "SubSites", CAMLViewFields: "<ViewFields><FieldRef Name='SubSiteName' /><FieldRef Name='SubSiteIcon' />", completefunc: function (xData, Status) { $(xData.responseXML).SPFilterNode("z:row").each(function() { var tdHtml = "<tr class=''>"; tdHtml = tdHtml + "<td id='icon'>" + $(this).attr("ows_SubSiteIcon") + $(this).attr("ows_SubSiteName") + "</td></tr>; $(".tablebodysites").append(tdHtml); }); } }); var siteTable = $('#sitepool').dataTable( { "bJQueryUI": true,"sPaginationType": "full_numbers","bPaginate": true,"bLengthChange": true,"bFilter": true,"bSort": true,"bInfo": true,"bAutoWidth": true } );</script>