# Vue Grid Responsive Design

The Grid offers a responsive web-design and adapts its layout based on the available screen size.

The responsive features of the Kendo UI for Vue Grid are:

* Responsive columns—Based on the viewport width, the visibility of the Grid columns toggles.
* Responsive height—Based on the height setting (for example, `"100%"`), the Grid adjusts its size depending on the height of its container.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/responsive-design/basic/source.txt)

## Columns

To control the visibility of the columns, use their [`media`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcolumnprops#media) property. The property accepts valid strings for the [`matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) browser API and toggles the visibility of the columns based on the media queries. If you set the [`hidden`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcolumnprops#hidden) property, the behavior of `media` is overridden.

| `media` configuration                            | The columns are visible when                                                          |
| ------------------------------------------------ | ------------------------------------------------------------------------------------- |
| `"(min-width: 500px)"`                           | The viewport width is `500px` or more.                                                |
| `"(max-width: 300px)"`                           | The viewport width is `300px` or less.                                                |
| `"(min-width: 500px) and (max-width: 1200px)"`   | The viewport width is between `500px` and `1,200px`.                                  |
| `"(max-width: 320px), (orientation: landscape)"` | The viewport width is more than `320px` and the device is in a landscape orientation. |

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/responsive-design/multicolumn-grid/source.txt)

### Bootstrap 5 Compatibility

The [`media`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcolumnprops#media) property accepts the device identifiers which are [available in Bootstrap 4](https://v4-alpha.getbootstrap.com/layout/grid/#grid-options) and which range from extra small (`xs`) to extra large (`xl`).

| `media` configuration | Equivalent to           |
| --------------------- | ----------------------- |
| `"xs"`                | `"(max-width: 576px)"`  |
| `"sm"`                | `"(min-width: 576px)"`  |
| `"md"`                | `"(min-width: 768px)"`  |
| `"lg"`                | `"(min-width: 992px)"`  |
| `"xl"`                | `"(min-width: 1200px)"` |

Using the Bootstrap 4 identifiers is a less flexible approach than declaring the responsive breakpoints. However, the identifiers enable the Grid to match the Bootstrap grid system of the surrounding template.

```jsx
<div class="col-xs-12 col-md-6">
    <Grid
        style={{
            height: '400px',
        }}
        data={products}
    >
        <GridColumn field="UnitPrice" title="Price" media={'xs'} />
        <GridColumn field="UnitsInStock" title="In stock" media={'md'} />
    </Grid>
</div>
<div class="col-xs-12 col-md-6">{/* Second column */}</div>
```

## Height

You can control the height of the Grid through the `height` CSS property. If the height is set in percentage units, the Grid adjusts its layout accordingly just like a regular HTML element. In CSS, setting the `height` of an element to percentage units requires that its parent element has its `height` defined. Because this rule is applied recursively, to make the Grid fill 100% of the browser window, all elements up to the document root `<html>` element must have a height of 100%.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/responsive-design/height/source.txt)

## Suggested Links

* [Using Responsive Columns with Virtualization](https://www.telerik.com/kendo-vue-ui-develop/components/grid/scroll-modes#virtual-scrolling)
* [API Reference of the GridColumn](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcolumnprops)
* [Bootstrap 4 Device Identifiers](https://v4-alpha.getbootstrap.com/layout/grid/#grid-options)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-vue-ui-develop/components/styling/theme-builder)