---
title: "ZingGrid Web Component: `<zg-body>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-body>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/api/tags/zg-body
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-body.md
mode: provenance
representation: markdown
origin_response_id: 7217a591eb0f20d979b02bbdaf9349d9
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.615Z
version_nonce: 292e19372ca1b007883e525724aca75e
generated_at_utc: 2026-10-31T01:13:43.965Z
response_nonce: 3d74b3f3ea328ad98df92a9d9bb9ca73
```

# `<zg-body>`

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-body--docs)

The `<zg-body>` tag is created dynamically by the ZingGrid library and as such, **should not be manually added by the developer**. However, the user can style `<zg-body>` through CSS variables or by targeting the tag directly.

![Image of the DOM relationship for the zg-body web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-body-web-component-dom.png "Image of the DOM relationship for the zg-body web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGTable](https://www.zinggrid.com/docs/api/tags/zg-table) | Parent | Generated | n/a |
| [ZGRow](https://www.zinggrid.com/docs/api/tags/zg-row) | Child | Generated | n/a |

#### Related Web Components

- [`<zg-row>`](https://www.zinggrid.com/docs/api/tags/zg-row/)

## Attributes

There are no attributes available for the `<zg-body>` web component.

## CSS Variables
`<zg-body>` can be styled by common CSS variables, like so:

```css
:root {
  --zg-body-background: red;
}
```

Below is a list of all the associated `--zg-body` CSS variables. Check out the [full list of CSS variables](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Default | Description | Demo |
| --- | --- | --- | --- |
| `--zg-body-background` | transparent | Styles the background of grid body | [Example code](https://app.zingsoft.com/demos/embed/WVUSRWLP) |
| `--zg-body-border` | 0 | Styles the border of grid body | [Example code](https://app.zingsoft.com/demos/embed/YWTPH9M0) |
| `--zg-body-border-bottom` | var(--zg-body-border, 0) | Styles the bottom border of grid body | [Example code](https://app.zingsoft.com/demos/embed/25V704EG) |
| `--zg-body-border-left` | var(--zg-body-border, 0) | Styles the left border of grid body | [Example code](https://app.zingsoft.com/demos/embed/FPYUYEEX) |
| `--zg-body-border-right` | var(--zg-body-border, 0) | Styles the right border of grid body | [Example code](https://app.zingsoft.com/demos/embed/70O17569) |
| `--zg-body-border-top` | var(--zg-body-border, 0) | Styles the top border of grid body. Note: If `--zg-row-border-top` set, it will override `--zg-body-border-top`. | [Example code](https://app.zingsoft.com/demos/embed/C9XJMTTQ) |
| `--zg-body-card-background` | linear-gradient(45deg, #f9fafb 20%, #fff) | Styles the background of grid body in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/XGWDT5HI) |
| `--zg-body-card-border` | 0 | Styles the border of grid body in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/UMQX6FC1) |
| `--zg-body-card-border-bottom` | var(--zg-body-card-border, 0) | Styles the bottom border of grid body in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/0CXPJ9CM) |
| `--zg-body-card-border-left` | var(--zg-body-card-border, 0) | Styles the left border of grid body in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/FPJ9DVE0) |
| `--zg-body-card-border-right` | var(--zg-body-card-border, 0) | Styles the right border of grid body in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/YJHA2SIP) |
| `--zg-body-card-border-top` | var(--zg-body-card-border, 0) | Styles the top border of grid body in 'card' layout-mode. Note: If `--zg-row-border-top` set in 'card' layout-mode it will override `--zg-body-border-top`. | [Example code](https://app.zingsoft.com/demos/embed/ZQPWRYZ2) |
| `--zg-body-card-display` | grid | Sets display of grid body in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/JHSU4OLH) |
| `--zg-body-color` | inherit | Sets the font color of contents inside grid body | [Example code](https://app.zingsoft.com/demos/embed/X9E64KMS) |
| `--zg-body-font-family` | inherit | Sets the font family of contents inside grid body | [Example code](https://app.zingsoft.com/demos/embed/XS22J4JG) |
| `--zg-body-font-size` | inherit | Sets the font size of contents inside grid body | [Example code](https://app.zingsoft.com/demos/embed/YLAXDUP9) |
| `--zg-body-font-style` | inherit | Sets the font style of contents inside grid body | [Example code](https://app.zingsoft.com/demos/embed/0VOTEN03) |
| `--zg-body-font-weight` | inherit | Sets the font weight of contents inside grid body | [Example code](https://app.zingsoft.com/demos/embed/F6CRSTMQ) |
| `--zg-body-line-height` | inherit | Sets the line-height of contents inside of grid body | [Example code](https://app.zingsoft.com/demos/embed/UO5MJUXO) |

## CSS Selector

As a non-visual element, you should not apply styles to this tag.

## Slots

There are no slots available for the `<zg-body>` web component.