---
url: "https://vueda.dev/v3/reference/theming/keys/FormGrid.md"
title: "FormGrid"
---

# FormGrid

Source: `client/lib/theme/vueda-tailwind/form/index.js`

> Twelve-column field grid with `data-col` span hooks at the form breakpoint.

Vue component: [FormGrid](/v3/reference/api/vue/FormGrid.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/FormGrid.md#theme-key-FormGrid-root) | 7 classes | Twelve-column field grid with `data-col` span hooks at the form breakpoint. |

<a id="theme-key-FormGrid-root"></a>

## root

> Twelve-column field grid with `data-col` span hooks at the form breakpoint.

Default classes:

```text
grid grid-cols-12 gap-x-5 gap-y-4 min-w-0
[&>*]:col-span-12 [&>*]:min-w-0
[@media(min-width:720px)]:[&>[data-col='3']]:col-span-3
[@media(min-width:720px)]:[&>[data-col='4']]:col-span-4
[@media(min-width:720px)]:[&>[data-col='6']]:col-span-6
[@media(min-width:720px)]:[&>[data-col='8']]:col-span-8
[@media(min-width:720px)]:[&>[data-col='9']]:col-span-9
```

Source: `client/lib/theme/vueda-tailwind/form/FormGrid.theme.js:18`