Pages - using ipsGrid system

[Nathan Explosion]

I'm trying to put together a 10 column grid on a page, with one of the columns being larger than the other 9, and running in to problems with it. Hope someone can shed some light on how this might work for me.

Starting point: set up a grid with 12 columns (have put in a black border to better present the issue, by the way.....not related to the issue at all)

<div>
	<div class='ipsGrid ipsGrid_collapsePhone'>
{{foreach $rows as $row}}
      	<div style='border:1px solid black;' class='ipsGrid_span1'>1</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>2</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>3</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>4</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>5</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>6</div>
      	<div style='border:1px solid black;' class='ipsGrid_span1'>7</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>8</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>9</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>10</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>11</div>
		<div style='border:1px solid black;' class='ipsGrid_span1'>12</div>
{{endforeach}}
	</div>
</div>

Works great:

Next step - drop the last 2 columns, and make the second column _span3:

<div>
	<div class='ipsGrid ipsGrid_collapsePhone'>
{{foreach $rows as $row}}
      	<div style='border:1px solid black;' class='ipsGrid_span1'>1</div>
        <div style='border:1px solid black;' class='ipsGrid_span3'>2</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>3</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>4</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>5</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>6</div>
      	<div style='border:1px solid black;' class='ipsGrid_span1'>7</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>8</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>9</div>
        <div style='border:1px solid black;' class='ipsGrid_span1'>10</div>
{{endforeach}}
	</div>
</div>

Here's the result - first row all good, then the second has various column indents, then you see additional indenting on the third row and so on.

[Nathan Explosion]

OK - so this appears to be because I've not enclosed each row in a div of its own....thrown one in and everything drops on to its own line, even more of a mess.

I've worked around it now by adding a <br> after the </div> for the last column. I'll go back to how to style that enclosing div and see what I can do.