How to define elements identical in width in a row with isolation-span

Question

There is one thing i haven't managed to accomplish with Singularity yet. At the moment I try to make the switch from the float to the isolation output style and use the grid- and isolation-span. But there is one pattern i am unable to reproduce. Unsure if there is a more elegant way. For the float output i've used the following settings so far e.g.

<div class="floater">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

@import 'compass';
@import 'singularitygs';
$grids: 16;
$gutters:0.25;
$output: 'float';

.floater div
{
  background-color:red;
  height:10em;
  @include float-span(4);
  &:nth-child(4n) {
      @include float-span(4, 'last');
  }
}

Leads to 4 boxes, identical in width, aligned next to each other. But how to accomplish the same with isolation-span / isolation output. If i try

<div class="isolator">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

@import 'compass';
@import 'singularitygs';
$grids: 16;
$gutters:0.25;
$output: 'isolation';

.isolator div
{
  background-blue;
  height:10em;
  @include isolation-span(4, 1, 'right', $gutter: .25);
  &:nth-child(4n) {
        @include isolation-span(4, 13, 'right', $gutter: .25);
  }
}

Do i have to write for every "column" a nth-child and a isolation-span include (cuz with the nth-child from the float example only the first and last box is shown)? Or is there a shorter way like with the float example above? Best regards Ralf

Answer 1

You need to write out each item. The isolation output method discreetly places an item into a column position on the grid. Technically speaking, what you are doing with float output method is actually a byproduct of happy singularity that happens with a combined float and symmetric grid and will change if you change either of those variables.

What's happening here is that it just so happens that with a symmetric grid, because each item is the same width, you can interchange one column for another. With float, it just so happens that each column you place butts up against the item to it's left (for ltr). These two properties combine to allow you to define a span in float always starting at the 1st column, but have it show up in any position because you can interchange columns in symmetric grids. You then take advantage of that to stack them together. This behavior is actually the core difference between the float output style's mental model and the isolation output style's mental model (which, as stated above, discreetly places an item into a column position).