---
title: "Gridlines | Features"
description: "Easily add gridlines to your grid through attributes, CSS variables, and CSS selectors."
url: https://www.zinggrid.com/docs/features/gridlines
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/gridlines.md
mode: provenance
representation: markdown
origin_response_id: 8e3b859e761a9276d788f9df094e80be
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.692Z
version_nonce: 2e82c8e25077b0c2ef502b9dee2b4904
generated_at_utc: 2026-11-06T17:08:43.236Z
response_nonce: 0aba349966effe6f78ebd91e66d93414
```

# Gridlines

Customize how gridlines display through attributes, CSS variables, and CSS selectors.

## Horizontal

By default, all grids display horizontal gridlines.

### Horizontal Gridlines Grid
Here is a complete grid with the default horizontal gridlines:

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

## Vertical
To display vertical gridlines instead of horizontal ones, simply add the `gridlines` attribute with "vertical" as its value, like so:

```html
<zing-grid gridlines="vertical"></zing-grid>
```

### Vertical Gridlines Grid
Here is a complete grid customized to only display vertical gridlines:

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

## Both

To display both vertical and horizontal gridlines on your grid, simply add the `gridlines` attribute with "both" as its value, like so:

```html
<zing-grid gridlines="both"></zing-grid>
```
### Horizontal and Vertical Gridlines Grid
Here is a complete grid customized to display both horizontal and vertical gridlines:

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

## Card Mode

In card mode, only horizontal gridlines are supported. The `gridlines` attribute accepts "horizontal", but not "vertical". Setting it to "both" will only display the horizontal gridline.

### Horizontal Gridlines Card Grid
Here is a complete card grid with horizontal gridlines:

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

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

* [API Elements List](https://www.zinggrid.com/docs/api/tags/zing-grid)
* [CSS Variables List](https://www.zinggrid.com/docs/api-css-variables)