---
title: "Using CSS with ZingGrid | Docs"
description: "ZingGrid has a set of concepts and guidelines that will make developing grids faster and easier."
url: https://www.zinggrid.com/docs/guides/using-css
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/guides/using-css.md
mode: provenance
representation: markdown
origin_response_id: 7bec708479573612a38d1e21cb2348e0
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.722Z
version_nonce: bc410b3e86c24d06b41781fd946e62f9
generated_at_utc: 2026-11-08T23:36:15.355Z
response_nonce: 9859e80d105212af3467b9f89b5ff92a
```

# Using CSS with ZingGrid
Using custom elements, you are able to bind CSS directly to ZingGrid tags. For certain elements within a tag's Shadow DOM, you can target them with our CSS Variable API system.

## Inline CSS
Here is an example of how you can style your grid with inline CSS:

```html
<zing-grid
  data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'
  style="border: 10px solid #003749;"
>
  <zg-caption style="background: #ef5350;">Hello World</zg-caption>
</zing-grid>
```

## External CSS
Here is an example of how you can style your grid with external CSS:

```html
<style>
  zing-grid { border: 10px solid #003749; }
  zg-caption { background: #ef5350; }
</style>

</zing-grid data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'>
  <zg-caption>Hello World</zg-caption>
</zing-grid>
```

## CSS Variables
ZingGrid also exposes a CSS variables-based API, used primarily for the built-in themes and creating custom themes. There are also a few instances where you might need to style an element inside the tag's Shadow DOM where CSS variables are the only recourse (see below). For most use cases, using direct inline/external styling will be the smoother experience.

> **Note:** You can view the [full list of ZingGrid CSS Variables here](https://www.zinggrid.com/docs/api-css-variables).

```html
<style>
  :root {
    --zing-grid-border: 10px solid #003749;
    --zg-caption-background: #ef5350;
  }
</style>

</zing-grid data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'>
  <zg-caption>Hello World</zg-caption>
</zing-grid>
```

> **Warning:** It is recommended to define CSS variable overrides inside the :root {} selector (see below) for maximum cross-browser support. You can also define CSS variables within the 'scope' of an element, although this is less universally supported:
>
>   <pre><code class="lang-html line-numbers">
> zing-grid { --zing-grid-border: 5px solid red; }
> zing-grid[layout="card"] { --zing-grid-border: 3px solid blue; }
>   </pre>

## Generated Elements
Some ZingGrid tags act as configuration items and are not visible when the grid is rendered. Styling these elements will have no effect on screen:

- `zg-colgroup`
- `zg-column`
- `zg-data`
- `zg-param`

---

`<zg-column>` is a tricky case. It behaves the same as a table's `<col>` element in native HTML and therefore has a limited subset of CSS properties that will affect it. These properties are:

- `background`
- `border`
- <s>`visibility: collapse`</s>
- <s>`width`</s>

> **Note:** 1. `visibility: collapse` has inconsistent cross-browser behavior and is discouraged.

> 2. While `width` does work, cell widths are generated dynamically (and with min-width), and your setting will likely not work as intended.

## Custom CSS Classes Grid
You also have the ability to set a custom CSS class on all grid rows, columns, and cells. Since they are auto-generated, you define the classes on the `<zing-grid>` tag itself (see below):

- `row-class="myRowClass"
`
- `col-class="myColClass"
`
- `cell-class="myCellClass"
`

```html
<style>
  .myRowClass { border: 5px solid #003749; }
  .myColClass:nth-of-type(even) { color: #fff; background: #ef5350; border: #ef5350; }
  .myCellClass:nth-of-type(odd) { background: yellow; }
</style>

<zing-grid
  data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'
  row-class="myRowClass"
  col-class="myColClass"
  cell-class="myCellClass"
></zing-grid>
```

## Column Override
Add `cell-class="myOverrideClass"` to individual `<zg-column>` tags to override on a per-column basis, like so:

```html
<style>
  /* Applies to all body cells */
  .myCellClass { background: #ef5350; }
  /* Override specific cells */
  .cell-lastname { background: yellow; }
</style>

<zing-grid
  data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'
  cell-class="myCellClass"
>
  <zg-colgroup>
    <zg-column index="firstName"></zg-column>
    <zg-column index="lastName" cell-class="cell-lastname"></zg-column>
  </zg-colgroup>
</zing-grid>
```

## Compact Display

Add `compact` to `<zing-grid>` to show a compact version of the grid (see below). This works for all built-in themes.

```html
  <zing-grid
    data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'
    compact
  ></zing-grid>
```