Auto Sizing in xy-grid does not work as expected combined with Responsive Adjustments

[n00bium]

Expected Behavior

if I am defining a grid like this:

<div class="grid-x">
  <div class="cell small-12 medium-4 large-auto">One</div>
  <div class="cell small-12 medium-6">Two</div>
  <div class="cell small-12 medium-auto large-4">Three</div>
</div>

I would expect that "One" is 2/12, "Two" is 6/12 and "Three" ist 4/12 columns wide.

Current Behavior

The properties of .medium-auto seem to override .large-4, so the Outcome is:
"One" is 3/12, "Two" is 6/12 and "Three" ist 3/12 columns wide.

Possible Solution

The property flex: 1 1 0px; that is in "size"-auto is not overrieden bis size-# eg. .large-8.

Test Case and/or Steps to Reproduce (for bugs)

Test Case: https://codepen.io/anon/pen/jKjXxN

Context

It should be possible to override behaviour in an mobile-first environment.
But changing the grid-layout from automatic to percentage in different breakpoints is the main reason for using the grid.

Your Environment

• Foundation version(s) used: 6.5.0-rc.1
• Browser(s) name and version(s): Latest firefox and Chrome

[DanielRuf]

I would expect that "One" is 2/12, "Two" is 6/12 and "Three" ist 4/12 columns wide

I guess you mean
4 / auto
6
auto / 4

In this case you have to specify the large- classes for the other cells too.

[n00bium]

Why? Medium should also do the trick for "two". The Problem is that large-4 does not override medium-auto behaviour.

[n00bium]

It does not work with large-6 in "Two" either. As far as I know foundation inherits its sizing from the smaller breakpoints. This is still the case. There is not mich to distribute when there is only one element with auto.

[DanielRuf]

its sizing from the smaller breakpoints

This is right and how it is intended to work, the class of the current breakpoint gets applied.

[n00bium]

So the current breakpoint should override the smaller breakpoint. That means the described behaviour is faulty. The class .large-4 should override .medium-auto. But It behaves as if "One" and "Three" were set to auto.

[DanielRuf]

cc @ncoden I guess one cell should not affect another. I'm not yet sure if there is something not correctly working as this is an unexpected behavior.

Can this be also reproduced in 6.4.3?

[n00bium]

Can this be also reproduced in 6.4.3?

Yes.

[heppstux]

I'm also suffering from that issue. medium-auto should be overridden by large-4 and such – like the other cell-size classes would do.

[SassNinja]

@n00bium you can achieve the desired behavior by simply adding the class large-shrink

<div class="grid-x">
  <div class="cell small-12 medium-4 large-auto">One</div>
  <div class="cell small-12 medium-6">Two</div>
  <div class="cell small-12 medium-auto large-shrink large-4">Three</div>
</div>

[n00bium]

@SassNinja

Okay, that is good to know. But it seems a little bit hacky. I am feeling that this should work with one sizing-class per breakpoint.

[SassNinja]

But it seems a little bit hacky.

Why does it feel hacky?
The default cell has flex: 0 0 auto which you override for medium with medium-auto and for large with large-shrink.

Imo it would feel more hacky if small-x, medium-x and large-x reset flex property to 0 0 auto over and over again.
x-shrink feels like less overhead.

[ncoden]

Duplicate of #10891
Resolved in #10927

---

However, contrary to what you said in the pull request, there may be a way for efficient way to fix this issue. With autoprefixer this add a lot of properties that could be factorized.

[ncoden]

Imo it would feel more hacky if small-x, medium-x and large-x reset flex property to 0 0 auto over and over again. - @SassNinja

This is what we are doing now.

See #11397

[n00bium]

Why does it feel hacky?

Imo the whole grid is designed in a way that tells the cells their behaviour with a class. The Combination of large-shrink and large-8 works, but you tell that column "use the space you need for your content" and then you override that with "use 8 ouf 12 Columns of the row you are in". So what should that poor little thingh do now? That solution would also add other Problems, for example, why does large-8 override large-shrink. Thats why I think it seems hacky.

[SassNinja]

This is what we are doing now.
See #11397 - @ncoden

ok I see, extending a placeholder is probably the best solution here.

I've tested your PR: works as expected and fixes this issue without the need to add another class 👍