features
Menu
Menu

Styling

ZingGrid is stylable through CSS selectors like any other element, or you can take advantage of ZingGrid's CSS variables. Use our built-in themes or create custom themes to easily switch up the look of your grid.

On This Page

CSS Variables

ZingGrid provides CSS variables as an alternative way to style your grid.
CloseCopy Copied
:root {
  --zing-grid-font-family: cursive;
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Component Selectors

You can use native CSS selectors to syle your grid.
CloseCopy Copied
zing-grid {
  font-family: cursive;
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Themes

You can set the value of the theme attribute to any of ZingGrid's three built-in themes: Android, Default, or iOS.
CloseCopy Copied
<zing-grid theme="default"></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
<zing-grid theme="android"></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
<zing-grid theme="ios"></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
<zing-grid theme="dark"></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
<zing-grid theme="black"></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading