[Flex Grid] .row and .column classes aren't receiving default styles

[designerdean]

How to reproduce this bug:

Simply create a div.row with a nested div.column. Notice that there is no longer a max-width set by default.

What should happen:

The div.row should have the max-width equal to whatever is defined as $global-width.

What happened instead:

Neither the div.row nor div.column are receiving any styles like they were in v6.3.

Browser(s) and Device(s) tested on:

Chrome on Macbook Pro.

Foundation Version(s) you are using: 6.4.1

Test case link:

• CodePen with Foundation 6.4.1, XY Flexbox grid and MotionUI

[rafibomb]

The XY Gris uses different syntax. Since you are looking to use the flex-grid, you'll want to change this in app.scss

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

[designerdean]

Well this is what I have had in app.scss:

If I add @include foundation-flex-grid; after @include foundation-everything($flex: true); then it works. But it seems like that defeats the purpose of ($flex: true)...doesn't it?

[brettsmason]

@designerdean you can set $xy-grid: false; in your settings file and that will use the flex grid rather than the XY grid when using the everything mixin. Probably needs better documentation on that.

[designerdean]

Ohhhhh...so if I swet $xy-grid: false; in my settings file, I assume my app.scss file should look like this?

[brettsmason]

Yep exactly.

[designerdean]

Perfect. Thank you so much for the help!

[brettsmason]

Great glad its working now. I think we need some docs changes to make this clearer so going to leave this open for now.

[idevtech]

I had the same problem and the fix worked. Documentation definitely needs updating to indicate if

@include foundation-everything(true)

which is what would be present to turn Flex-Grid on prior to 6.4 will be use the new XY-Grid instead and to use Flex-Grid the following needs to be added to the settings.scss file.

$xy-grid: false;

[DanielRuf]

Closing as #10962 is merged so the docs are a bit more clear about this.