Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<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>
// ----
// 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);
}
}
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%;
}
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.