Menu icon Foundation
Switched to flex grid, everything broke.

I just switched to using flex grid, and when this happened all of my columns started collapsing on each other, and the only way to get them back to normal was to float each one left/right individually.

I also had to set a lot of my "main" containers (page-top, page-middle, etc) to overflow: hidden, as when I applied the floats that fixed the horizontal alignment of columns, for some reason these containers shriveled up to the very top of the page even if their heights were set to 100%.

Does any of this sound familiar/make sense to anyone?

flexflex-gridflex gridgridrowcolumn

I just switched to using flex grid, and when this happened all of my columns started collapsing on each other, and the only way to get them back to normal was to float each one left/right individually.

I also had to set a lot of my "main" containers (page-top, page-middle, etc) to overflow: hidden, as when I applied the floats that fixed the horizontal alignment of columns, for some reason these containers shriveled up to the very top of the page even if their heights were set to 100%.

Does any of this sound familiar/make sense to anyone?

Jacob Brooks over 3 years ago

The F6 Flex Grid is much different than the base Float Grid. Id suggest looking at the docs: http://foundation.zurb.com/sites/docs/flex-grid.html to get up to speed. You can still specify sized columns IE: small-12 medium-6 columns etc, but you dont have to. One thing that may have caused your issue would be making sure that the 'foundation-flex-classes' have been un-commented out of the app.scss file. For me its one of the last @includes in the app.scss file. This is a newer addition to F6 and without it, the grid falls apart. It needs to be active if you have switched to the Flex Grid. Also, just to make sure, you have to comment out the 'foundation-grid' in the app.scss file if you want to use the 'foundation-flex-grid'. Let me know if that helps and if not, maybe share a link and/or some code and I can try to help further.

Jacob

Calder Pegden over 3 years ago

Thanks for the response Jacob.

I definitely did everything you mentioned, however the @include's you mentioned are in foundation_and_overrides.scss for me.

I ended up copying the css for the flex-grid into its own separate file and appending "-flex" onto each class name, now I'm able to use both the normal and flex grid which seems to be working pretty well.

Jacob Brooks over 3 years ago

Whatever works! For what its worth, which version of F6 do you have? Mine is 6.2.3

in my app.scss file i have:

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

I commented out the 'foundation-grid' and un-commented out the 'foundation-flex-grid' and 'foundation-flex-classes'. The '_overrides.scss' file you mentioned, i assumed thats a file you created? If so, any chance that something you have in that file is overriding the regular foundation setup? Good luck coding!

Calder Pegden over 3 years ago

I'm using foundation-rails, but the version is the same (6.2.3.0). The overrides file I mentioned is generated by default when you install the foundation gem.

Rafi Benkual over 3 years ago

Calder - do you see the includes that Jacob mentioned above? Those control the output classes and mixins so there is no conflict?

Calder Pegden over 3 years ago

Hey Rafi, yes I saw that. I'm fairly confidant I did that correctly.