Skip to content

Instantly share code, notes, and snippets.

@zellwk
Created March 20, 2015 04:26
Show Gist options
  • Select an option

  • Save zellwk/589c84a84954c01e9347 to your computer and use it in GitHub Desktop.

Select an option

Save zellwk/589c84a84954c01e9347 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="gallery">
<div class="gallery__item"></div>
<div class="gallery__item"></div>
<div class="gallery__item"></div>
<div class="gallery__item"></div>
</div>
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----
@import "susy";
$layout-map: (gutters:0);
@include with-layout($layout-map) {
.gallery__item {
@include gallery(3 of 12);
}
}
// Demo
.gallery__item {
height: 90px;
background: red;
&:nth-child(2n) {
background: blue;
}
}
.gallery__item {
width: 25%;
float: left;
}
.gallery__item:nth-child(4n + 1) {
margin-left: 0;
margin-right: -100%;
clear: both;
margin-left: 0;
}
.gallery__item:nth-child(4n + 2) {
margin-left: 25%;
margin-right: -100%;
clear: none;
}
.gallery__item:nth-child(4n + 3) {
margin-left: 50%;
margin-right: -100%;
clear: none;
}
.gallery__item:nth-child(4n + 4) {
margin-left: 75%;
margin-right: -100%;
clear: none;
}
.gallery__item {
height: 90px;
background: red;
}
.gallery__item:nth-child(2n) {
background: blue;
}
<div class="gallery">
<div class="gallery__item"></div>
<div class="gallery__item"></div>
<div class="gallery__item"></div>
<div class="gallery__item"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment