---
title: "Viewport | Features"
description: "ZingGrid has built-in and customizable breakpoints for conditional CSS styling."
url: https://www.zinggrid.com/docs/features/viewport
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/viewport.md
mode: provenance
representation: markdown
origin_response_id: e434edeeca5b2ba78609afdfba2bd91e
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.707Z
version_nonce: 47f85719a32bc643ab95dcdc7471a861
generated_at_utc: 2026-10-27T01:07:14.563Z
response_nonce: bb41c6f6bc3d27757de866037ec2caf7
```

# Viewport

The `viewport` attribute automatically changes its value based on the current width of the grid, according to internal presets. Similar to the native `@media` CSS directive (albeit only in the horizontal), it changes based on the width of the grid, not the device. This is important so that we can show card layout-mode for grids in short-width columns, even in a max-width browser window.

## Automatic Breakpoints

The value of `viewport` changes as the width of the grid changes. You can use these breakpoints when styling your custom grids, or create your own using the `[viewport-types='']` config. Currently, there are **5** built-in breakpoints:

* `mobile` - 0 to 550px
* `tablet-portrait` - 551px to 1023px
* `tablet-landscape` - 1024px to 1199px
* `desktop` - 1200px to 1399px
* `desktop-large` - 1400px+

## Pause Viewport Switching

Add `viewport-pause` to the grid to pause the automatic-switching of the viewport (see below). This locks the grid into the current viewport breakpoint no matter the width of the grid moving forward. Remove the attribute to resume the normal, automatic breakpoint switching.

```html
<zing-grid viewport-pause></zing-grid>
```

> **Note:** You can set `viewport-pause` to keep the current value of viewport (even on refresh), but resizing the device will not update the attribute value, thus freezing the breakpoint until you remove the `viewport-pause` attribute. If your intention is to avoid viewport switching completely, use `viewport-stop` (listed below).

### Viewport Paused Grid
Here is a complete grid with the viewport paused:

[Example code](https://app.zingsoft.com/demos/embed/KKMHFMHN)

## Stop Viewport Switching

Add `viewport-stop` to the grid to stop the automatic-switching of the viewport (see below). Like `viewport-pause`, this will prevent the grid from automatically switching the viewport when it is resized. But unlike it, it also removes the `viewport` attribute instead of just locking it. This is a subtle difference, but it should give you flexibility in handling your custom styling.

```html
<zing-grid viewport-stop></zing-grid>
```

> **Note:** If `viewport-stop` is added before render, the grid is locked into the normal layout mode (if the width is naturally small, it will start in card mode). If `[layout="card"]` or `[layout="row"]` was also added, it would lock into those viewports instead. If `viewport-stop` is added after render, the grid retains the layout mode at the time it was rendered.

### Viewport Stopped Grid
Here is a complete grid with viewport stopped:

[Example code](https://app.zingsoft.com/demos/embed/DWPW5S7C)

## Custom Breakpoints

Define your own breakpoints using a `viewport-types` attribute on the `<zing-grid>` tag (see below). The value must be valid JSON, so use single-quotes for the attribute wrapper. You will have to style the grid based on the `viewport` selector.

```html
<zing-grid viewport-types='{
  "a": 300,
  "b": 400,
  "mobile": 500,
  "c": 600,
  "max": null
}'
></zing-grid>

<style>
  [viewport="a"] zg-caption { background: green; }
  [viewport="b"] zg-caption { background: blue; }
  [viewport="c"] zg-caption { background: red; }
  [viewport="max"] zg-caption { background: orange; }
></style>
```

> **Note:** If you want the grid to automatically switch to card layout-mode (`<zing-grid layout="card">`), you must define one of your breakpoints with the name `mobile`. Internally, ZingGrid looks for `[viewport="mobile"]` to know when to switch from row to card mode if `layout` is not manually added.

### Custom Viewport Breakpoints Grid
Here is a complete grid with custom breakpoints for resizing:

[Example code](https://app.zingsoft.com/demos/embed/YL7H3124)

## Card Density Breakpoints

While your grid is in card layout, add `card-density-breakpoint` to a `<zg-column>` to control the minimum viewport tier at which that field is visible in the card. The field hides below its assigned tier and shows at it and every larger one; fields without a `card-density-breakpoint` are always visible, and fields sharing the same value show/hide together.

```html
<zg-colgroup>
  <zg-column index="city" type="text"></zg-column>
  <zg-column card-density-breakpoint="desktop" index="incorporated" type="text" header="Incorporated"></zg-column>
  <zg-column card-density-breakpoint="tablet-landscape" index="population.2013" type="number" header="Population.2013"></zg-column>
  <zg-column card-density-breakpoint="desktop" index="population.2014" type="number" header="Population.2014"></zg-column>
  <zg-column card-density-breakpoint="mobile" index="rank" type="number" header="Rank"></zg-column>
</zg-colgroup>
```

`card-density-breakpoint` accepts either one of the 5 built-in `viewport` labels (`mobile`, `tablet-portrait`, `tablet-landscape`, `desktop`, `desktop-large`) or its 1-5 rank shorthand (`mobile` = 1 ... `desktop-large` = 5).

> **Note:** This works together with `viewport-types` above: when a grid defines custom breakpoints, those custom labels replace the 5 built-in tiers entirely for `card-density-breakpoint` as well, and the rank shorthand instead follows the custom breakpoints' order from smallest to largest pixel value.

When any column declares `card-density-breakpoint`, ZingGrid automatically adds a "More..."/"Less" toggle to each card. Clicking it reveals (or re-hides) that one card's hidden fields, regardless of the grid's current viewport tier.

### Card Density Breakpoint Grid
Here is a complete grid with card density breakpoints set:

[Example code](https://app.zingsoft.com/demos/embed/S28G66AO)

## Related Resources
Here are some extra resources related to this feature to help with creating your grid:

* [Viewport Attributes List](https://www.zinggrid.com/docs/api/tags/zing-grid#viewport)
* [Viewport Methods List](https://www.zinggrid.com/docs/api-methods#Viewport)
* [`zg-column` Attributes List](https://www.zinggrid.com/docs/api/tags/zg-column#card-density-breakpoint)
* [Layouts](https://www.zinggrid.com/docs/features/layouts)