Has the update changed how the grid works?

[magicjoef]

Hi, I have just installed the latest version, and I'm experiencing some strange behaviour with the grid.

I'm quite new to Foundation 6, but I have used FoundationPress (with Foundation 5) for quite a long time. Last week things were working okay when I tried out this new version, but I saw there was an update to the structure so tried starting over.

My row and column sizing is all over place now!?

I have just edited to include a screenshot. This is what happens if I paste the grid section from the kitchen sink template into a different page template. This feels like a painfully obvious / silly mistake on my part, but I can't for life of me catch it!

[olefredrik]

Hi @magicjoef ,

Yes, the grid has been getting an overhaul that was introduced in version 6.4 of Foundation. A few days ago, I updated FoundationPress with full support for all the latest features. You can read more about the new grid (named the XY Grid) here. The new grid is built on flexbox, which currently is supported by most browsers that people use today.

You should still be able to use the old float based grid, if you need to support legacy browsers.

Did you clone the repository from the current master branch, or did you pull the latest changes in an existing project?

[magicjoef]

Thanks for your reply. Okay, good to know not just me! I pulled down a brand new install.

[olefredrik]

Can we close this issue then, or did you find something that did not work as expected after following the new instructions in the XY-Grid docs?

[magicjoef]

I'm still having some issues I'm afraid. Which version of the grid should be default in this version?

How would I revert to the classic grid? (I've got a project to get built, and will experiment with the new grid after.)

Thanks for your help!

[olefredrik]

I did actually include more than I should. Only the XY-Grid should be the default choice in this version. As the XY-Grid is built on flexbox, we would then need to :

@include foundation-xy-grid-classes;
@include foundation-flex-classes;

In this (recently merged) pull request, the app.scss file is updated #1031

If you don't want to use the XY-grid, you can remove the include statements above and include the foundation-grid + foundation-float-classes instead. As I understand it, you should then be able to use the grid as before.

Please let me know if this works for you.

[magicjoef]

Thanks. Yes, this seems to be working better. I get issues when I put the xy grid within the main-wrap div in the full width template, but outside of that it works fine. I'll investigate that further in the future.

I have also successfully enabled the old grid system using your instructions. Again, I get issies in the main wrap, but I will take a look.

Thanks so much for your help.