Vuetify: Nested grid: breakpoints not working?

[marvinroger]

Steps to reproduce

• Resize your browser

Versions

• Vue 2.2.6
• Vuetify 0.12.2
• Windows 10 x64
• Chrome 58

What is expected ?

The old behavior (pre 0.12) which I think is the correct one, is that the cards under the j loop should take all the width of the parent when reaching the XS breakpoint.

What is actually happening ?

It does not take all the width.

Reproduction Link

https://jsfiddle.net/8Lt1es7r/

[zeljic]

I think you should add "row wrap" to inner v-layout tag.

https://jsfiddle.net/5grvuy39/

[marvinroger]

Maybe the docs could clarify how the column-md, row-md, etc. works?

[marvinroger]

Actually, only wrap is needed in the inner v-layout. This makes sense: if the content overflows, we allow it to wrap. It it self-explaining.

However, still, I don't get why column-[size] and row-[size] are necessary. I mean, if you want to make 3 columns on md and 3 lines on xs you only need to xs12 and md4... Right?

[johnleider]

You are correct, you could do that. The extra options are just there for developers that would like more control.

[johnleider]

Looking through this, everything is working as expected. You have xs6 on the outside flex, which means it will only ever go 6 wide, even if you do resize down to mobile. I think your implementation would need xs12 sm6 or something of the sort so that the elements can wrap. Also as stated above, there was an API change with 0.12 that outlined the need for some of the extra props.

As far as the final point, I'm inclined to agree and the presence of those extra features not only adds size to the package but is really not needed as you can easily accomplish the same things without them.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord