- for (var x = 1; x < 16; x++)
  div.person
    img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/darth-vader.jpg")
    h3 Darth
View Compiled
* {
  box-sizing: border-box; 
}

body {
  background: #222;
}

@mixin rowMachine($numPerRow, $margin) {
  width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
  &:nth-child(n) {
   
    margin-right: $margin;
  }
  &:nth-child(#{$numPerRow}n) {
    margin-right: 0;
   
  }
  &:nth-child(#{$numPerRow}n+1) {
    clear: left;
  }
 
}

.person {
 
  background: white;
  padding: 10px;
  margin-bottom: 20px;
  float: left;
  @media (min-width: 1200px) {
    @include rowMachine(4, 2%);
  }  
  
  @media (min-width: 900px) and (max-width: 1200px) {
    @include rowMachine(4, 2%);
  }
  
  @media (max-width: 900px) {
    @include rowMachine(3, 4%);
  }
  
  img {
    max-width: 100%; 
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js