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:

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:

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:

Related Resources

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

• API Elements List
• CSS Variables List