As I've seen, I can create several rows in only one container. The problem comes with IE when not all elements have the same height. The following example shows a 3x3 grid in IE8. Notice the 4th element appears after the 5th.
Fortunately I can solve that with a simple "clear:both" in the first element of each row...
<div class="container">
<div class="item">one (Lorem ipsum dolor sit amet, consectetur adipisicing elit.)</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
</div>
…
@include border-box-sizing;
.container {
background: #f00;
@include container;
}
.item {
background:#ccc;
@include span-columns(1,3);
&:nth-child(3n) { @include omega; }
&:nth-child(3n+4) { clear: both; }
}
This works on IE8, but in IE7 the elements of the second row appear aligned at the top and I don't know how to solve this.