---
title: "ZingGrid User Content Model | Docs"
description: "ZingGrid has a set of concepts and guidelines that will make developing grids faster and easier."
url: https://www.zinggrid.com/docs/api/user-content-model
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/user-content-model.md
mode: provenance
representation: markdown
origin_response_id: 276befb935b662e583b265e2211b85fd
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.657Z
version_nonce: 0735307d9969602a0dce9a27853972a1
generated_at_utc: 2026-11-08T23:36:15.903Z
response_nonce: 93d683134f1321b08096b1c1151e81be
```

# User Content Model

Similar to native HTML elements, ZingGrid follows a strict content model. It defines which tags are allowed to be placed inside of each other. The following example shows the basic structure of the content model:

```html
<zing-grid>

  <zg-data>
    <!-- may have a variety of defined parameters -->
    <zg-param></zg-param>
  </zg-data>

  <zg-header>
    <zg-caption></zg-caption>
    <zg-source></zg-source>
  </zg-header>

  <zg-colgroup>
    <!-- Define and format N number of columns of data -->
    <zg-column></zg-column>
  </zg-colgroup>

  <zg-card></zg-card>

  <zg-dialog></zg-dialog>

  <zg-pager></zg-pager>

  <zg-footer>
    <zg-caption></zg-caption>
    <zg-source></zg-source>
  </zg-footer>

</zing-grid>
```

Not all of these elements are required; you are free to construct your grids using the features you need. If required elements are omitted, ZingGrid will attempt to add them automatically to the grid on render. If elements are added incorrectly, it will attempt to correct it or add missing parent elements, where possible.

> **Warning:** Although flexible, some elements are recommended to be added manually despite the fact they will be rendered if omitted. The best example is `<zg-colgroup>` with `<zg-column>`. You do not need to define `<zg-column>` elements, but if you do, you should wrap them inside `<zg-colgroup>` directly. This will speed up render time depending on the number of data rows the grid displays. You can see if each element is optional or not on the [API Elements Usage page](https://www.zinggrid.com/docs/api/tags/usage).