Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne
Created June 19, 2015 20:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mirisuzanne/ec9a24d25b88b5bd5a92 to your computer and use it in GitHub Desktop.
Save mirisuzanne/ec9a24d25b88b5bd5a92 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<ul class="solutionThumbnails">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Susy (v2.2.5)
// ----
@import 'susy';
.solutionThumbnails {
@include container(24);
li {
@include gallery(6 of 24 split);
background: #666;
display: block;
height: 240px;
margin-bottom: 1em; // for viewing only
}
}
.solutionThumbnails {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.solutionThumbnails:after {
content: " ";
display: block;
clear: both;
}
.solutionThumbnails li {
width: 24.16667%;
float: left;
background: #666;
display: block;
height: 240px;
margin-bottom: 1em;
}
.solutionThumbnails li:nth-child(4n + 1) {
margin-left: 0.41667%;
margin-right: -100%;
clear: both;
}
.solutionThumbnails li:nth-child(4n + 2) {
margin-left: 25.41667%;
margin-right: -100%;
clear: none;
}
.solutionThumbnails li:nth-child(4n + 3) {
margin-left: 50.41667%;
margin-right: -100%;
clear: none;
}
.solutionThumbnails li:nth-child(4n + 4) {
margin-left: 75.41667%;
margin-right: -100%;
clear: none;
}
<ul class="solutionThumbnails">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment