Minimal Grid – Fluid grid with gutters

minimal-grid-gutters.css

.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; }
  }