Search code examples
csssingularitygs

Singularitygs - center divs using grid-span location and output-style 'float'

I have a 14 column grid called .container. I am trying to center 4 divs having the class .block within .container where each .block spans 3 columns.

I'd like to accomplish this by adding one positioning rule to .block instead of adding an isolation style to each .block.

Based on my understanding of Singularitygs, I should use output-style float to position multiple divs with the same class relative to one another.

Ideally, I could use @include grid-span(3, 2, $output-style: 'float'); where location is 2, but location seems to be ineffective. According to the documentation, location is optional. But does this imply that it is ignored? https://github.com/at-import/Singularity/wiki/Spanning-The-Grid#float-span

If location is not effective with grid-span(3, 2, $output-style: 'float');, does anyone know an alternative solution that is simple and elegant? I'd like to avoid generating additional elements in the DOM or positioning each individual .block element.

I've created a gist on sassmeister here: http://sassmeister.com/gist/5e92b58e8bb2a206a228

And a summary of the code I am using is here:

HTML

<div class='container'>
  <div class='block'> </div>
  <div class='block'> </div>
  <div class='block'> </div>
  <div class='block'> </div>
</div>

CSS

@include add-grid(14);

.container {
  height: 100px;
  width: 100%;
}

.block {
  @include grid-span(3, 2, $output-style: 'float');
  height: 25px;
}

Thanks in advance for your thoughts!

Solution

  • One solution is to add a grid-span percentage (column + gutter) as left margin to the first .block.

    This value can be retrieved via the grid-span function which is exposed by the Singularity API. Specifically, it returns "a percentage equal to the column-span at a given span and location plus a gutter-span". https://github.com/at-import/Singularity/wiki/Grid-Helpers

    In the case above, since we want 1 column plus gutter's worth of space on each side of our 4 .block's, we use 

    .block:first-of-type {
  margin-left: grid-span(1, 1);
}

    Here is an updated gist showing the centered divs using this approach: http://sassmeister.com/gist/27e13cc4ae586f2f885f