Menu icon Foundation
Foundation 6 Codepen setup check please?

I've got a codepen set up here with what should be all the right links, and yet when I do a simple row > column layout with 3 columns set to small-4, I'm getting a vertical stack instead of 3 blocks in a horizontal row:

https://codepen.io/justmonk/pen/gxRvEe/

Please help?

foundation 6codepengrid not working

I've got a codepen set up here with what should be all the right links, and yet when I do a simple row > column layout with 3 columns set to small-4, I'm getting a vertical stack instead of 3 blocks in a horizontal row:

https://codepen.io/justmonk/pen/gxRvEe/

Please help?

This post has been closed. No new replies can be added.

Michal Pandyra 2 months ago

It looks like the Foundation 6.4.1 CSS file that you're loading from the CDN is compiled for use with the new "XY Grid" system while your HTML markup is for the traditional Grid.

Monk 2 months ago

...so... why do the docs list out 3 different types of html for using the grid, but only the x/y one works now?

Or is there a different version of foundation that allows you to develop in all of the grid options? I grabbed the css link for this particular version of foundation from https://cdnjs.com/libraries/foundation

 - also, thank you, using the correct markup fixes the issue.

Michal Pandyra 2 months ago

Good morning,

With Foundation 6.4 cane some sweeping changes to the entire framework. The new XY Grid layout tool was introduced as the new standard and the traditional Float Grid and Flex Grid have been moved to a legacy branch.

I suspect that the version of Foundation 6.4 available via Cloudflare CDN has been compiled to the new standard.

Monk 2 months ago

It's fine, I'll use the new markup. I was just confused by the documentation.

Michal Pandyra 2 months ago

If you wish to continue using the Float Grid, Cloudflare CDN does appear to provide a version built for it. The file is here:

https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.2/css/foundation-float.min.css