Generated by SassMeister.com.

SassMeister-input-HTML.html

<section>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Center me if i'm on a line all alone!</div>
</section>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Susy (v2.2.5)
// ----

@import "susy";

$susy: (
  flow: ltr, // ltr | rtl
  output: float, // float | isolate
  math: fluid, // fluid | static (requires column-width)
  column-width: 3em, // false | value
  container: 972px, // length or % | auto
  container-position: center, // left | center | right | <length> [*2] (grid padding)
  last-flow: to,
  columns: 12,
  gutters: .75,
  gutter-position: after, // before | after | split | inside | inside-static (requires column-width)
  global-box-sizing: border-box, // content-box | border-box (affects inside/inside-static)
  debug: (
    image: show,
    color: rgba(#66f, .5),
    output: overlay, // background | overlay
    toggle: bottom right,
  ),
  use-custom: (
    background-image: true, // look for background-image mixin
    background-options: false, // look for background-size, -origin and -clip and other compass/bourbon mixins
    box-sizing: true, // look for custom bix sizing mixin
    clearfix: false, // true = look for internal clearfix before using micro clearfix
    rem: true, // look for rem mixin
  )
);

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: container();
  margin: 0 auto;
}

div {
	background-color: #aaa;
	margin-top: gutter();
	height: 100px;
	flex: 0 0 auto;
  width: span(4);
  
	@media (min-width: 900px) {
    width: span(3);
	}
}

SassMeister-output.css

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 972px;
  margin: 0 auto;
}

div {
  background-color: #aaa;
  margin-top: 3.7037%;
  height: 100px;
  flex: 0 0 auto;
  width: 30.8642%;
}
@media (min-width: 900px) {
  div {
    width: 22.22222%;
  }
}

SassMeister-rendered.html

<section>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Center me if i'm on a line all alone!</div>
</section>