> For the complete documentation index, see [llms.txt](https://wotamann.gitbook.io/vuetify-form-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wotamann.gitbook.io/vuetify-form-base/schema/grid.md).

# Grid

### **Definition in Form-Base**

```markup
<!-- 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" ... />
```

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

Integrate Vuetify-Grid behaviour by setting the Form-Base Property `'col' and/or 'row'`&#x20;

### **Definition in Schema**&#x20;

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.

```javascript
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.&#x20;

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

### [Example](https://wotamann.github.io/grid)

### Information at [Vuetify Grid](https://vuetifyjs.com/en/framework/grid#usage)