4

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 ?

yoyoma
  • 3,336
  • 6
  • 27
  • 42

1 Answers1

2

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">
Zachary Dow
  • 1,897
  • 21
  • 36
  • is it just me or is this still broken? the updated fiddle still doesn't render correctly, even when the external stylesheets are loaded in the correct order. the only way I can get it to work is to remove the border...? – simon Jul 26 '16 at 22:45
  • @simon you're not wrong. I think I got the wrong reference. Updated the fiddle link and it should be fine now. – Zachary Dow Jul 27 '16 at 17:00
  • This is not working. I believe you have to share the CDN for pure-css grid – Arian Nargesi Nov 08 '21 at 13:39