# Angular Data Grid Responsive Design

The [Angular Grid](https://www.telerik.com/kendo-angular-ui/components/grid) offers a responsive web-design and adapts its layout based on the available screen size.

The responsive features of the Kendo UI Grid for Angular 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.

## Columns

To control the visibility of the columns, use their [`media`](https://www.telerik.com/kendo-angular-ui/components/grid/api/columncomponent#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.

| `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. |

The following example demonstrates how to use the `media` property to toggle column visibility based on the viewport width.

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

### Bootstrap 5 Compatibility

The [`media`](https://www.telerik.com/kendo-angular-ui/components/grid/api/columncomponent#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.

```html
<div class="col-xs-12 col-md-6">
    <kendo-grid>
        <kendo-grid-column media="xs">
        </kendo-grid-column>

        <kendo-grid-column media="md">
        </kendo-grid-column>
    </kendo-grid>
</div>
<div class="col-xs-12 col-md-6">
</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%.

The following example demonstrates configuring the Grid to fill 100% of the browser window by setting percentage-based height on the Grid and its parent elements.

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

## Suggested Links

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