Purecss grids not working as expected

Question

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 ?

Answer 1

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">