experiment_id: web-retrieval-v1
fixture_id: /docs/features/gridlines
mode: provenance
representation: html
origin_response_id: 60335aaf60d6fadb4846647043280390
version: 2026-10-22
version_created_at_utc: 2026-10-22T19:49:39.619Z
version_nonce: b93901283f70420f2fa99478a6e1ed39
generated_at_utc: 2026-11-06T16:35:18.140Z
response_nonce: 845f765082211480f61ab2a7b29f3302
Docs Version 1

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:

Top

Vertical

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

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

Vertical Gridlines Grid

Here is a complete grid customized to only display vertical gridlines:

Top

Both

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

<zing-grid gridlines="both"></zing-grid>

Horizontal and Vertical Gridlines Grid

Here is a complete grid customized to display both horizontal and vertical gridlines:

Top

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:

Top

Related Resources

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

[features: gridlines]