Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<main class="container">
<div class="narrow">narrow</div>
<div class="wide">wide</div>
<div class="wider">wider</div>
</main>
// ----
// libsass (v3.2.5)
// ----
@import 'susy';
@include layout(3);
@include border-box-sizing;
.container {
@include container('show');
}
.narrow {
margin-left: span(1 'wide');
width: span(1);
}
.wide {
margin-left: span(1 'wide');
width: span(1 'wide');
}
.wider {
margin-left: span(1);
width: span(1 'wider');
}
div {
background: rgba(yellow, .25);
border: 1px solid red;
margin: 1rem 0;
padding: 1rem;
text-align: center;
text-transform: uppercase;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
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) 80%, transparent 80%);
background-size: 35.71429%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.container:after {
content: " ";
display: block;
clear: both;
}
.narrow {
margin-left: 35.71429%;
width: 28.57143%;
}
.wide {
margin-left: 35.71429%;
width: 35.71429%;
}
.wider {
margin-left: 28.57143%;
width: 42.85714%;
}
div {
background: rgba(255, 255, 0, 0.25);
border: 1px solid red;
margin: 1rem 0;
padding: 1rem;
text-align: center;
text-transform: uppercase;
}
<main class="container">
<div class="narrow">narrow</div>
<div class="wide">wide</div>
<div class="wider">wider</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.