[Feature Request] Better gutter/grid system

[ibrahimBeladi]

Problem to solve

Currently, the grid (grid-list-{xs through xl}) have some kind of limitation, when you use grid-list-md for example in a container, the gutter is applied to inner flex tags. When you want to increase elements' gutter within that flex you can use, for instance, grid-list-xl and it will be applied to whatever within that flex's container. But the problem is when you want to apply a smaller gutter, or you want to remove it altogather, unfortunatly you can't.

Proposed solution

I propose to change the precedence to the other way, md have higher precedence than xl. This will rotate the problem to the other prespective and make the same problem. But since the inner elements have less space then they are more likely to have smaller gutters than larger ones.
Also, I have been thinking about the possibility of taking out the grid, as a new independent component, out of the container component.

This will provide better usage and utilization of the power of the grid. Also, and the possibility of deeper user interface customization.

Codepen example

Sorry for the long post, but wanted to be as detailed as possible.
Happy new year!

[mattgreenfield]

I'm having this issue too, it seems the fix would be pretty simple (adding a child combinator > in the CSS) but would be a breaking change with pretty drastic consequences!

If it's any use I made this codepen before coming across this issue, it's a little simpler than the original post https://codepen.io/anon/pen/QoOXoX?editors=1010

For now I'll have to stop using the vuetify grid and roll my own.

[KaelWD]

Grid-list still works the same broken way, but the new grid system has gutters that can be set for each v-row