# GridContainer

:::tip
`GridContainer` is required to be used with [`GridRow`](./grid-row) and [`GridColumn`](./grid-row).
:::

## Demos

### Default grid

[[ demo src="/demo/grid/default.vue" browser="/demos/grid/default.vue" ]]

### Fixed-width grid

[[ demo src="/demo/grid/fixed.vue" browser="/demos/grid/fixed.vue" ]]

## API

### Props

| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `columns` | `number` | `gridcontainer.columns` | The number of columns. |
| `margin` | `number` | `gridcontainer.margin` | Margin around both sides of the grid container in `px`. |
| `gutter` | `number` | `gridcontainer.gutter` | Gutter between adjacent grid columns in `px`. |
| `width` | `number` | - | The width of the grid container in `px` when creating fixed-width grids. |

### Slots

| Name | Description |
| -- | -- |
| `default` | The content of the grid. Can only have [`GridRow`](./grid-row) components as direct children. |

### Global config

| Key | Type | Default | Description |
| -- | -- | -- | -- |
| `gridcontainer.columns` | `number` | `12` | The number of columns. |
| `gridcontainer.gutter` | `number` | `30` | Gutter between adjacent grid columns in `px`. |
| `gridcontainer.margin` | `number` | `0` | Margin around both sides of the grid container in `px`. |

#### Default config in `veui-theme-dls`

| Key | Type | Default |
| -- | -- | -- | -- |
| `gridcontainer.columns` | `number` | `24` |
| `gridcontainer.gutter` | `number` | `20` |
| `gridcontainer.margin` | `number` | `20` |