title: How to create a pinterest-style layout, but where the items have different widths, same height
body: <p>I stumbled on the Saatchi &amp; Saatchi website yesterday and I really like how their layout uses a seemingly random width for their posts, and it resizes really well on smaller window sizes.</p>
  
  <p><a href="http://saatchi.com/en-us/" rel="nofollow">http://saatchi.com/en-us/</a></p>
  
  <p>After digging through some source code, it looks like they are setting a class of either Small, Medium or Large.  Those classes have specific widths, but then there is some JS algorithm that makes them fill each row.  My main question is, how do I make sure they fit in on row, or that there aren't too many of the large sizes?  It appears that the small, medium and large sizes are input on their backend, but as newer posts appear, they get pushed down, so the solution can't be making sure that they fit by choosing the right sizes on the backend.</p>
  
  <p>The container is 1356px wide.  Here is what I came up with as far as their sizes go:</p>
  
  <pre><code>&amp;.small{
  
      width: 208px;//235 -- difference of 27
  }
  
  &amp;.medium{
  
      width: 317px;//344 -- difference of 27
  }
  
  &amp;.large{
  
      width: 426px;//454 -- difference of 28
  }
  </code></pre>
  
  <p>The values in comments are the ones being set by JS, and it's only set on some of the items, somehow they add 27 or 28 pixels to some of the divs to make everything fit.  Does anyone have any ideas on how their logic works?  What is the significance of 27?  </p>