Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<main>
<div class="one"><span>1</span></div>
<div class="two"><span>2</span></div>
<div class="three"><span>3</span></div>
<div class="four"><span>4</span></div>
</main>
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// Susy (v2.1.2)
// ----
@import "susy";
$susy: (
gutter-position: inside-static,
container: 100%,
columns: 4,
column-width: 120px,
gutter: 15px/120px,
debug: (
image: show,
),
);
@include border-box-sizing;
main {
@include container(content-box);
padding: 0 15px;
outline: 1px solid red;
}
div { @include span(1); }
span {
display: block;
background: yellow;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
main {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
background-size: 25%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
padding: 0 15px;
outline: 1px solid red;
}
main:after {
content: " ";
display: block;
clear: both;
}
div {
width: 25%;
float: left;
padding-left: 15px;
padding-right: 15px;
}
span {
display: block;
background: yellow;
}
<main>
<div class="one"><span>1</span></div>
<div class="two"><span>2</span></div>
<div class="three"><span>3</span></div>
<div class="four"><span>4</span></div>
</main>
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.