vue.js - what is the correct way to create a Vuetfiy grid?

Question

The Vuetify docs have lots of examples of how to use their grid layout support, e.g. a nested grid

  <v-container class="grey lighten-5">
    <v-row>
      <v-col sm="9">
        Row 1, Col 1
        <v-row>
          <v-col
            cols="8"
            sm="6"
          >
          Row 2, Col 1
          </v-col>
          <v-col
            cols="4"
            sm="6"
          >
          Row 2, Col 2
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>

But it's not clear to me what the requirements are for how these elements should be used. For example:

• Is <v-container> required?
• Does <v-row> in the parent grid have to be a direct child of <v-container>

Answer 1

Is `<v-container`> required?

No it's not required

Does in the parent grid have to be a direct child of

If you use the v-container and you want to use grid system, then yes.

Although, it's not necessary to use v-container, just starting with v-row and then using v-col you can achieve anything. Of course v-row and v-col have many attributes that can help.

Check this playground https://v2.vuetifyjs.com/en/components/grids/ After the API section there is one called PLAYGROUND

This PLAYGROUND helped me to understand how grid works.