Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="container">
<div class="col">
<div class="content">
Col 1
</div>
</div>
<div class="col">
<div class="content">
Col 2
</div>
</div>
<div class="col">
<div class="content">
Col 3
</div>
</div>
</div>
// ----
// libsass (v3.2.5)
// ----
@import "susy";
$susy: (
columns: 12,
gutters: .01,
// output: isolate,
// gutter-position: before,
container-position: center,
container: 1200px
);
.container {
@include container;
.col {
@include gallery(4);
text-align: center;
background: #333;
.content {
padding: 10px;
background: purple;
}
}
}
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.container:after {
content: " ";
display: block;
clear: both;
}
.container .col {
width: 33.27828%;
float: left;
text-align: center;
background: #333;
}
.container .col:nth-child(3n + 1) {
margin-left: 0;
margin-right: -100%;
clear: both;
margin-left: 0;
}
.container .col:nth-child(3n + 2) {
margin-left: 33.36086%;
margin-right: -100%;
clear: none;
}
.container .col:nth-child(3n + 3) {
margin-left: 66.72172%;
margin-right: -100%;
clear: none;
}
.container .col .content {
padding: 10px;
background: purple;
}
<div class="container">
<div class="col">
<div class="content">
Col 1
</div>
</div>
<div class="col">
<div class="content">
Col 2
</div>
</div>
<div class="col">
<div class="content">
Col 3
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment