Implementing Pure CSS framework from Yahoo.
In the provided code snippet, the first two div grids display correctly. The children of the first grid are divided equally into 1/6th each, while the children of the second grid are split into 1/6th and 5/6th respectively. However, in the third grid, there seems to be an issue where the 1/6th division renders fine but the 3/6th and 2/6th divisions are not displaying properly as showcased here. Can anyone shed light on why this is happening?
<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>