Generated by SassMeister.com.

SassMeister-input-HTML.html

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

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Singularity.gs (v1.5.1)
// ----

@import "singularitygs";
@include add-grid(14);
$singularity: (
        'debug': 'true'
);

.container {
  //background-color: lightpink;
  @include background-grid($color: grey);
  height: 100px;
  width: 100%;
  
}
.centered{
  @include grid-span(12, 3);
  .block {
  @include grid-span(2, $output-style: 'float');
  background-color: lightgrey;
  height: 25px;
  }
}

SassMeister-output.css

.container {
  background-image: linear-gradient(to right, grey 0%, grey 6.77966%, #9f9f9f 6.77966%, #9f9f9f 8.47458%, grey 8.47458%, grey 15.25424%, #9f9f9f 15.25424%, #9f9f9f 16.94915%, grey 16.94915%, grey 23.72881%, #9f9f9f 23.72881%, #9f9f9f 25.42373%, grey 25.42373%, grey 32.20339%, #9f9f9f 32.20339%, #9f9f9f 33.89831%, grey 33.89831%, grey 40.67797%, #9f9f9f 40.67797%, #9f9f9f 42.37288%, grey 42.37288%, grey 49.15254%, #9f9f9f 49.15254%, #9f9f9f 50.84746%, grey 50.84746%, grey 57.62712%, #9f9f9f 57.62712%, #9f9f9f 59.32203%, grey 59.32203%, grey 66.10169%, #9f9f9f 66.10169%, #9f9f9f 67.79661%, grey 67.79661%, grey 74.57627%, #9f9f9f 74.57627%, #9f9f9f 76.27119%, grey 76.27119%, grey 83.05085%, #9f9f9f 83.05085%, #9f9f9f 84.74576%, grey 84.74576%, grey 91.52542%, #9f9f9f 91.52542%, #9f9f9f 93.22034%, grey 93.22034%, grey);
  height: 100px;
  width: 100%;
}

.centered {
  -sgs-span-settings: ("span": 12, "location": 3, "grid": 12, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 100%;
  float: left;
  margin-right: -100%;
  margin-left: 16.94915%;
  clear: none;
}
.centered .block {
  -sgs-span-settings: ("span": 2, "location": 1, "grid": 12, "gutter": 0.25, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 15.25424%;
  clear: right;
  float: left;
  margin-left: 0;
  margin-right: 1.69492%;
  background-color: lightgrey;
  height: 25px;
}

SassMeister-rendered.html

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