I am using the documentation at http://purecss.io/grids/ and basically copying the example code to create a grid of thirds
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
However it is simply not displaying as the documentation explains - as 3 columns of equal thirds: http://jsfiddle.net/a7rnzn5f/1/
What am i not understanding ?
It's likely that you don't have the reference to the responsive part of the purecss grids.
From the link you provided:
Since media queries cannot be over-written, we do not include the grid system as part of pure.css. You'll have to pull it in as a separate CSS file. You can do this by adding the following tag to your page.
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->
Add that, and you should be good to go!
EDIT: I'm sorry, I didn't notice your fiddle. It looks like you did just the inverse. It doesn't look like you're including the base reference to purecss. I updated your fiddle with the reference below and it seems to work.
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">