Grid

Integrate Vuetify-Grid behaviour by setting the Form-Base Property 'col' or Schema-Properties 'col' .

Definition in Form-Base

<!-- object declaration -->
<v-form-base :col="{ cols:12, sm:8, md:6, lg:4 }" ... />

<!-- default grid -->
<v-form-base :col="{ cols:12 }" ... />
<v-form-base :col="{ cols:'auto' }" ... />

<!-- or shorthand for {cols:12 }  -->
<v-form-base :col=12 ... />
<v-form-base :col="12" ... />


<!-- 'row' Attribute 
set v-row and is a wrapper component for v-col. It utilizes flex properties 
to control the layout and flow of its inner columns. Standard gutter can be
reduced with the dense prop or removed completely with no-gutters

see -> https://vuetifyjs.com/en/components/grids/ 
-->
<v-form-base :row="rowAttribute" :col="12" ... />

const rowAttribute = { justify:'center', align:'center', noGutters:true } 

Integrate Vuetify-Grid behaviour by setting the Form-Base Property 'col' and/or 'row'

Definition in Schema

Get individual Grid-Control by using Schema-Properties 'col', 'offset' and 'order' for each control. Schema-Setting overrules the Grid-Definition in Form-Base Component.

schema: {      
  name1: { type: 'text', col: 4, offset: 2, order: 1 },
    // col: 4     // shorthand for col: { cols:4 }
    // offset: 2  // shorthand for offset: { offset:2 }
    // order: 1   // shorthand for order: { order:1 }
  },
  name2: { 
    type: 'text', 
    spacer:true,
    col: { cols:12, sm:6, md:4, lg:3, xl:2 }, 
    offset:{ offset:0, sm:1, md:2 }, 
    order:{ order:0, sm:1, md:2 } 
  }
}

Spacer

is a spacing component used to distribute remaining space between components. Schema prop spacer will place v-spacer after the current component, the components will push to the right and left of its container.

schema: {      
  name: { 
    type: 'text', 
    spacer:true 
  }
}

Example

Information at Vuetify Grid