title: What's the algorithm to pack squares and rectangles?
body: <p>Similar to the Windows 8 Slate interface, how to nicely fill a screen with squares and rectangles without leaving holes?</p>
  
  <p>Assumptions:</p>
  
  <ul>
  <li>a rectangle is basically two connected squares  </li>
  <li>the rectangles can be horizontal or vertical</li>
  <li>the screen width is 3 times of the width of a square</li>
  <li>the screen is filled from top to bottom</li>
  <li>such that the lowest part of the screen may not be aligned fully</li>
  <li>the order of rectangles and squares come in randomly (but can be re-ordered in a small cache before put onto screen, the cache size is limited, say 12)</li>
  </ul>
  
  <p>For example:</p>
  
  <pre><code>  +---++---++---+
    |   ||   ||   |
    +---++---+|   |
    +---++---+|   |
    |   ||   ||   |
    +---+|   |+---+
    +---+|   |+---+
    |   ||   ||   |
    +---++---++---+
    +--------++---+
    |        ||   |
    +--------+|   |
    +---++---+|   |
    |   ||   ||   |
    |   |+---++---+
    |   |
    |   |
    +---+
  </code></pre>