[Feature Request] improve nested grid gutters

[ThomasKientz]

Environment

Vuetify Version: 2.2.28
Vue Version: 2.6.11
Browsers: Chrome 81.0.4044.129
OS: Mac OS 10.15.3

Steps to reproduce

Nest a grid inside another.

Expected Behavior

The gutters to remain the same between all columns of all grids.

Actual Behavior

Gutters around columns of the nested grid are larger.

Reproduction Link

https://codepen.io/thomaskientz/pen/qBOMdpY

[halimb]

this is a breaking change, in a non major release, especially with such a central component as v-row, production applications layouts will be broken...

I'm asking, what's the quick workaround for this, instead of going through all the v-rows in my app to restore the original vertical spacing?

[Jaffsterz]

Yes it's a nightmare - we have a very large number of pages and they were all wrecked by this change.

Nobody responded to my raising it in my post above though so we have had to spend many hours going through all the pages and fixing them.

[halimb]

For anyone having a busy Monday debugging this, here's a quick and dirty fix :

/**
 * Temporary fix for breaking change in Vuetify v-grid
 * (see : https://github.com/vuetifyjs/vuetify/issues/11408)
 * TODO - remove this after migration
 */
.row:not([class*="my-"]):not([class*="ma-"]):not([class*="mt-"]):not([class*="mb-"]) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}