Foundation-sites: [The Grid] Block Grids & Display:none

[noerbot]

How to reproduce this bug:

1. Set up a Block Grid as shown in the example here.
2. Add a style="display:none;" attribute to the first "column" div (or a visibility class that would result in that div being hidden).
3. Notice how, when that div is hidden, its row has an empty space at the end of it.

What should happen:

The other columns should slide left/up to fill in the extra open space in the row.

What happened instead:

There is just a blank spot at the end of the row.

Test case:

• CodePen: Foundation 6.3.0 Bug - Block Grids & Display:none

[IamManchanda]

Although a bug, but the way code is written in block grids , this is bound to happen

.medium-up-3>.column:nth-of-type(3n+1), .medium-up-3>.columns:nth-of-type(3n+1) {
    clear: both;
}

[IamManchanda]

Friendly advice: Use flexbox => https://codepen.io/IamManchanda/pen/QdYJYb

http://foundation.zurb.com/sites/docs/flexbox.html

After all, browser usage of IE9 now is 0.25% only then why not use flexbox ( https://github.com/zurb/foundation-sites/issues/9591#issuecomment-277500217 )

[noerbot]

Thanks Harman! Flexbox seems like a better solution. I'll go ahead and close this issue!

[IamManchanda]

Yup Noah .... flexbox is a better one
because then with flexbox code becomes

.medium-up-3>.column, .medium-up-3>.columns {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
}