Grouping divs in rows (clarification needed) - xslt

Question

I realize that you are really good at programming and that your answers are dependable.
Is it possible for you to assist me in resolving an issue I am having with my xslt code? I'm new to progamming so I would appreciate any assistance I can get.
Your solution in grouping 3 divs in a row is found at the link below, but I do not know how to apply it to my code. I am using Sitecore and I have a div block that corresponds to each page generated to produce metro-like blocks, 3 in a row. So far I generates the desired divs but does not put them three in a row. My code is found below.
XSLT How can I wrap each 3 elements by div?
I would appreciate any help I can get.
<?xml version="1.0" encoding="UTF-8"?>
<!--=============================================================
File: ServicesFeatureblocks.xslt
Created by: sitecore\admin
Created: 3/27/2013 11:50:57 AM
Copyright notice at bottom of file
==============================================================-->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:sc="http://www.sitecore.net/sc"
xmlns:dot="http://www.sitecore.net/dot"
exclude-result-prefixes="dot sc">
<!-- output directives -->
<xsl:output method="html" indent="no" encoding="UTF-8" />
<!-- parameters -->
<xsl:param name="lang" select="'en'"/>
<xsl:param name="id" select="''"/>
<xsl:param name="sc_item"/>
<xsl:param name="sc_currentitem"/>
<!-- variables -->
<!-- Uncomment one of the following lines if you need a "home" variable in you code -->
<xsl:variable name="Services" select="sc:item('/sitecore/content/home/Services',.)" />
<!--<xsl:variable name="home" select="/*/item[#key='content']/item[#key='home']" />-->
<!--<xsl:variable name="home" select="$sc_currentitem/ancestor-or-self::item[#template='site root']" />-->
<!-- entry point -->
<xsl:template match="*">
<xsl:apply-templates select="$sc_item" mode="main"/>
</xsl:template>
<!--==============================================================-->
<!-- main -->
<!--==============================================================-->
<xsl:variable name="group" select="3" />
<xsl:template match="/">
<xsl:apply-templates select="$sc_currentitem[position() mod $group = 1]" />
</xsl:template>
<xsl:template match="item" mode="inner">
<div class="block orange">
<xsl:value-of select="sc:fld('Title',.)" />
</div>
<item/>
</xsl:template>
<xsl:template match="item">
<div>
<xsl:apply-templates
select="./item|following-sibling::services/item[position() < $group]" mode="inner" />
</div>
</xsl:template>
</xsl:stylesheet>

Answer 1

If you can use a sublayout instead of xslt rendering, You can achieve your functionality easily using Listview with GroupTemplate
<asp:ListView ID="listview1" runat="server" GroupItemCount="3" GroupPlaceholderID="groupPlaceholder"
ItemPlaceholderID="itemPlaceholder">
<LayoutTemplate>
<div class="productsContent">
<asp:PlaceHolder ID="groupPlaceholder" runat="server"></asp:PlaceHolder>
</div>
</LayoutTemplate>
<GroupTemplate>
<div class="product-rows">
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</div>
</GroupTemplate>
<ItemTemplate>
<div class="products">
</div>
</ItemTemplate>
</asp:ListView>