how can I layout my page by vuetify grid system?

Question

I'm new on vuetify and I'm a little confused by its grid system. I think we have just a v-container tag and after that just a v-row tag. v-col is a direct child of v-row and in v-col we shouldn't have any v-row. right?

Answer 1

Wrong. You can nest v-rows and v-cols. The only difference is that v-col, as you mentioned yourself, must be a direct child of v-row. Otherwise you can nest v-rows inside other v-rows, or inside v-cols, or inside v-container. Try it yourself here. Just change the v-card inside v-col to v-row with some text and see how it works.

<v-row
  :align="align"
  no-gutters
  style="height: 150px;"
>
  <v-col
    v-for="n in 3"
    :key="n"
  >
    <v-row no-gutters>Row {{n}}</v-row>
  </v-col>
</v-row>