Skip to content

Instantly share code, notes, and snippets.

@jxnblk
Last active December 20, 2015 11:49
Show Gist options
  • Save jxnblk/6126607 to your computer and use it in GitHub Desktop.
Save jxnblk/6126607 to your computer and use it in GitHub Desktop.
Minimal Grid – Fluid grid with gutters
.grid {
float: left;
width: 100%;
}
@media screen and (min-width: 512px) and (max-width: 895px) {
.grid { width: 45%; }
.grid:nth-child(2n+1) {
margin-right: 10%;
clear: left;
}
}
@media screen and (min-width: 896px) and (max-width: 1279px) {
.grid { width: 30%; }
.grid:nth-child(3n+1), .grid:nth-child(3n+2) { margin-right: 5%; }
.grid:nth-child(3n+1) { clear: left; }
}
@media screen and (min-width: 1280px) {
.grid { width: 22% }
.grid:nth-child(4n+1), .grid:nth-child(4n+2), .grid:nth-child(4n+3) { margin-right: 4%; }
.grid:nth-child(4n+1) { clear: left; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment