# Layout

The Form component provides comprehensive layout control to create professional, user-friendly forms. You can arrange form fields using a flexible grid system, control spacing, choose label orientations, and organize content with groupings.

## Multi-Column Layout

The column system uses [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) and involves two key properties working together:

* `cols`—Sets the number of columns in a container (FormElement or FormFieldSet)
* `colSpan`—Controls how many columns an element spans (FormFieldSet or Field)

The following example demonstrates the column system with Form, FormFieldSet, and Field components working together.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/form/layout/multi-col/source.txt)

The column system works hierarchically:

1. [`FormElement`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formelementprops) level—The `cols` property defines the main grid structure.
2. [`FormFieldSet`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formfieldsetprops) level—Can define its own `cols` (internal columns) and `colSpan` (how many FormElement columns it spans).
3. [`Field`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/fieldprops) level—Uses `colSpan` to span across columns within its container.

All column-related properties support responsive behavior. For detailed information, see the [Responsive Design](https://www.telerik.com/kendo-vue-ui-develop/components/form/responsive) article.

## Setting the Gutters

You can control the space between the form fields using the `gutters` property of [`FormElement`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formelementprops#gutters) and [`FormFieldSet`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formfieldsetprops#gutters).

The `gutters` prop accepts:

* A `Gutters` object with `rows` and `cols` keys (e.g. `{ rows: 5, cols: 10 }`)
* A number — applies to both row and column gaps (in pixels)
* A `ResponsiveFormBreakPoint` array for responsive gutters

The following example demonstrates custom gutter configurations.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/form/layout/gutters/source.txt)

## Vertical Layout

Vertical layout can be enabled by wrapping the form content inside the `FormElement` component, and each of the editors inside the `FieldWrapper` component. The following example uses the components from the Labels package to enhance the editor with label, error and hint texts.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/form/layout/vertical/source.txt)

## Horizontal Layout

Horizontal layout can be enabled by using the setup from the vertical layout and setting the [`horizontal`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formelementprops#horizontal) option of the `FormElement` component to `true`. Additionally, if you use the Label component to label the editor, you need to wrap the editor and error messages in `div` element with `k-form-field-wrap` CSS class.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/form/layout/horizontal/source.txt)

## Suggested Links

* [API Reference of the FormElement](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formelementprops)
* [API Reference of the FormFieldSet](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formfieldsetprops)
* [Responsive Design](https://www.telerik.com/kendo-vue-ui-develop/components/form/responsive)
* [Labels package](https://www.telerik.com/kendo-vue-ui-develop/components/labels)