Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
395 views
in Technique[技术] by (71.8m points)

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

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...