Spanning The Grid

Singularity is what we like to call a semantic grid system, meaning that instead of grid classes being generated that you then apply to your HTML, the grid is stored entirely within your CSS and applied directly to the element you want to use it on. This makes working with responsive grids very easy as you don't need to swap classes using JavaScript or combine lots of assumptions into a single class. It also allows you to build and use grids that are not tied to specific sizes, allowing you to make more compelling and future friendly designs. The key to all of this is the grid-span mixin.

Grid Span

The key to spanning your grid is to use the grid-span mixin. The two inputs that are needed are $span and $location referring to how many columns you want to span, and what column you would like to start spanning from.

#foo {
  // Span 1 column, starting at the 2nd column
  @include grid-span(1, 2);
}