Vuetify: [Bug Report] Unable to align horizontal layouts inside a vertical one when using `grid-list-lg`

[AlexandreBonneau]

Versions and Environment

Vuetify: 1.0.5
Vue: 2.5.13
Browsers: Google Chrome, Mozilla Firefox
OS: Linux, Windows

Steps to reproduce

Use the following html structure:

<v-container grid-list-lg>
    <v-layout column wrap>
        <v-flex xs6>...</v-flex>
        <v-layout row wrap> <!-- those elements are not aligned correctly -->
            <v-flex xs6>...</v-flex>
            <v-flex xs6>...</v-flex>
        </v-layout>
        <v-flex xs6>...</v-flex>
    </v-layout>
</v-container >
````

### Expected Behavior
All the `v-text-field` in the `v-flex` element should be correctly left-aligned.

### Actual Behavior
That css rule...:
```css
.container.grid-list-lg .layout:not(:only-child) {
    margin: auto -8px;
}

...modify the margin, but only for a subset of the elements, mis-aligning those.

Reproduction Link

You can see the bug here.

A potential fix would be to not use grid-list-lg, and use <v-layout row wrap justify-space-between>, however doing so removes any margin between the elements, and adding one (with mr-1 for instance) will just push the next element on its own line. You can see that here.

[AlexandreBonneau]

Adding some padding instead of margin does not push the element on another line (see here), however you then need to add some padding to all the elements in the form if you want to consistently keep them at the same width, but that will mess up the right-hand side alignment with other forms too.

This is not a good workaround in my opinion.

[KaelWD]

Grid lists have a fairly strict required structure: v-container -> v-layout -> v-flex

Your codepen works fine if you follow that structure correctly: https://codepen.io/anon/pen/QmWVxQ?editors=1000

[AlexandreBonneau]

This works great that way, thanks.

Perhaps the documentation could be updated to remind that need for a strict structure?

[KaelWD]

It is mentioned already, not very clearly though:

There are also some examples of more complex layouts: https://vuetifyjs.com/en/layout/grid#example-nested-grid

Closing as there isn't really anything we can do about this short of a full grid rewrite. Feel free to open a new issue on the documentation repository if you have any ideas on how that page could be improved.

[agnjunio]

I ran into a similar issue with this CSS rule, I don't think it's a great idea to select all children v-layouts. Instead, it would be smarter to select only the direct first-child, so it doesn't break the alignment of other children.

This may seem dumb, but I don't think the layout creation should be too strict. In my case, I simply can't create sub containers because I need to use v-layout inside a component slot. Consider this example:

<v-container grid-list-lg>
  <v-layout>
    <v-expansion-panel expand>
      <v-expansion-panel-content>
        <v-layout justify-space-between slot="header">
          <span>Content</span>
          <div>Content</div>
        </v-layout>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-layout>
</v-container>

How should I do it without explicitly setting the margins of my inner v-layout?