Skip to content

Instantly share code, notes, and snippets.

@krisbulman
Last active September 3, 2015 13:13
Show Gist options
  • Save krisbulman/063b92aeeeabc52001d7 to your computer and use it in GitHub Desktop.
Save krisbulman/063b92aeeeabc52001d7 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="grid-wrapper">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
</div>
// ----
// libsass (v3.2.5)
// ----
@import 'susy';
.grid-wrapper {
max-width: 1024px;
margin: 0 auto;
}
.grid-item {
// defaults one across
width: 100%;
margin-bottom: 1rem;
height: 100px;
background-color: #ccc;
// 3 across (4 cols of 12 cols)
@media (min-width: 450px) {
@include gallery(4 of 12);
}
// 4 across (3 cols of 12 cols)
@media (min-width: 768px) {
@include gallery(3 of 12);
}
// 6 across (2 cols of 12 cols)
@media (min-width: 1024px) {
@include gallery(2 of 12);
}
}
.grid-wrapper {
max-width: 1024px;
margin: 0 auto;
}
.grid-item {
width: 100%;
margin-bottom: 1rem;
height: 100px;
background-color: #ccc;
}
@media (min-width: 450px) {
.grid-item {
width: 32.20339%;
float: left;
}
.grid-item:nth-child(3n + 1) {
margin-left: 0;
margin-right: -100%;
clear: both;
margin-left: 0;
}
.grid-item:nth-child(3n + 2) {
margin-left: 33.89831%;
margin-right: -100%;
clear: none;
}
.grid-item:nth-child(3n + 3) {
margin-left: 67.79661%;
margin-right: -100%;
clear: none;
}
}
@media (min-width: 768px) {
.grid-item {
width: 23.72881%;
float: left;
}
.grid-item:nth-child(4n + 1) {
margin-left: 0;
margin-right: -100%;
clear: both;
margin-left: 0;
}
.grid-item:nth-child(4n + 2) {
margin-left: 25.42373%;
margin-right: -100%;
clear: none;
}
.grid-item:nth-child(4n + 3) {
margin-left: 50.84746%;
margin-right: -100%;
clear: none;
}
.grid-item:nth-child(4n + 4) {
margin-left: 76.27119%;
margin-right: -100%;
clear: none;
}
}
@media (min-width: 1024px) {
.grid-item {
width: 15.25424%;
float: left;
}
.grid-item:nth-child(6n + 1) {
margin-left: 0;
margin-right: -100%;
clear: both;
margin-left: 0;
}
.grid-item:nth-child(6n + 2) {
margin-left: 16.94915%;
margin-right: -100%;
clear: none;
}
.grid-item:nth-child(6n + 3) {
margin-left: 33.89831%;
margin-right: -100%;
clear: none;
}
.grid-item:nth-child(6n + 4) {
margin-left: 50.84746%;
margin-right: -100%;
clear: none;
}
.grid-item:nth-child(6n + 5) {
margin-left: 67.79661%;
margin-right: -100%;
clear: none;
}
.grid-item:nth-child(6n + 6) {
margin-left: 84.74576%;
margin-right: -100%;
clear: none;
}
}
<div class="grid-wrapper">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment