Vuetify擁有一個12點的柵格系統，它使用flex-box構建，柵格用於佈局應用程式的內容。它包含5種類型的媒體斷點，用於定位特定的螢幕大小或方向。柵格元件的屬性實際上是從它們定義的屬性派生的類，這允許您輕鬆地將這些輔助類指定為屬性，同時仍然提供在任何地方使用的類；其實vuetify的柵格與bootstrap的柵格系統是類似的。

   其中v-layout就是對應柵格中的一行，而v-flex對應的就是一列；

【v-layout應用】

 <v-layout row wrap>
....................
 </v-layout>
 

【v-fiex】

     <v-flex xs12 sm10>      
        <v-tree url="/item/category/list"
                :isEdit="isEdit"
                @handleAdd="handleAdd"
                @handleEdit="handleEdit"
                @handleDelete="handleDelete"
                @handleClick="handleClick"
        />
      </v-flex>
 

【綜合應用例子】

  <v-layout class="px-4 pb-3" >
        <v-flex xs2>
          <v-btn  class="info">新增品牌</v-btn>
        </v-flex>
        <v-spacer />
        <v-flex xs6>
          <v-text-field   label="搜尋" hide-details append-icon="search" v-model="key"></v-text-field>
        </v-flex>
      </v-layout>
 

意思程式碼中的px-4表示x軸邊距為4，pb-3表示底部邊距為3；以及 <v-spacer />表示自動填充，這個很常用。