Pure CSS grid sixths

Question

Using Pure CSS from Yahoo.

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 here. Anyone know why?

<div class="pure-g">
    <div class="pure-u-1-6"> 1 </div>
    <div class="pure-u-1-6"> 2 </div>
    <div class="pure-u-1-6"> 3 </div>
    <div class="pure-u-1-6"> 4 </div>
    <div class="pure-u-1-6"> 5 </div>
    <div class="pure-u-1-6"> 6 </div>
</div>
<div id="content" role="main" class="pure-g">
    <div class="pure-u-1-6"> 1 </div>
    <div class="pure-u-5-6"> 2 </div>
</div>
<div class="pure-g">
    <div class="pure-u-1-6"> 1 </div>
    <div class="pure-u-3-6"> 2 </div>
    <div class="pure-u-2-6"> 3 </div>
</div>

Answer 1

There are no classes pure-u-3-6 and pure-u-2-6 in pure.css

Use pure-u-1-2 and pure-u-1-3 instead.

Your updated Fiddle:
https://jsfiddle.net/u8ywdx06/2/