title: Pure CSS grid sixths
body: <p>Using <a href="http://purecss.io/" rel="nofollow">Pure CSS</a> from Yahoo.</p>
  
  <p>With the below code block, the first two div grids render as expected. Children of the first div are all 1/6th and the children of second are 1/6th and 5/6th. However, with the third one, the 1/6th renders fine but the other two, 3/6th and 2/6th get messed up as seen <a href="https://jsfiddle.net/u8ywdx06/1/" rel="nofollow">here</a>. Anyone know why?</p>
  
  <pre><code>&lt;div class="pure-g"&gt;
      &lt;div class="pure-u-1-6"&gt; 1 &lt;/div&gt;
      &lt;div class="pure-u-1-6"&gt; 2 &lt;/div&gt;
      &lt;div class="pure-u-1-6"&gt; 3 &lt;/div&gt;
      &lt;div class="pure-u-1-6"&gt; 4 &lt;/div&gt;
      &lt;div class="pure-u-1-6"&gt; 5 &lt;/div&gt;
      &lt;div class="pure-u-1-6"&gt; 6 &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="content" role="main" class="pure-g"&gt;
      &lt;div class="pure-u-1-6"&gt; 1 &lt;/div&gt;
      &lt;div class="pure-u-5-6"&gt; 2 &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="pure-g"&gt;
      &lt;div class="pure-u-1-6"&gt; 1 &lt;/div&gt;
      &lt;div class="pure-u-3-6"&gt; 2 &lt;/div&gt;
      &lt;div class="pure-u-2-6"&gt; 3 &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>