Skip to content

Instantly share code, notes, and snippets.

@jxnblk
Last active December 20, 2015 15:18
Show Gist options
  • Save jxnblk/6152650 to your computer and use it in GitHub Desktop.
Save jxnblk/6152650 to your computer and use it in GitHub Desktop.
Minimal fluid grid without gutters
.grid {
float: left;
width: 100%;
}
@media screen and (min-width: 512px) and (max-width: 895px) {
.grid { width: 50%; }
.grid:nth-child(2n+1) { clear: left; }
}
@media screen and (min-width: 896px) and (max-width: 1279px) {
.grid { width: 33.333333%; }
.grid:nth-child(3n+1) { clear: left; }
}
@media screen and (min-width: 1280px) {
.grid { width: 25%; }
.grid:nth-child(4n+1) { clear: left; }
}
.overhide { overflow: hidden; }
/**
* Usage: Make sure that elements with the .grid class are
* the only direct children of their container element.
* Setting overflow: hidden to the container will make it
* span the full height of its children.
*
* Example:
*
* <div class="overhide">
* <div class="grid"></div>
* <div class="grid"></div>
* <div class="grid"></div>
* <div class="grid"></div>
* </div>
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment