zg-cell

The <zg-cell> tag is a web component that controls the styling and display for the grid cells. It corresponds to HMTL tables td tag and is automatically inserted and should not be placed directly in user's HTML.

Image of the DOM relationship for the zg-caption web component tag

Related Web Components

Attributes

There are no attributes available for <zg-cell> web component.

CSS Variables

All the associated --zg-cell CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

root: {
  --zg-cell-background: red;
}
ZGCell CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-cell-backgroundvar(--zg-cell-background)Styles the background of cells
--zg-cell-background_hoverBrowser's default valueStyles the background of cells on hover
--zg-cell-background_hover_layout_rowvar(--zg-cell-background_hover)Styles the background of cells in 'row' layout-mode on hover
--zg-cell-background_layout_rowvar(--zg-cell-background)Styles the background of cells in 'row' layout-mode
--zg-cell-background_layout_row_sortedvar(--zg-cell-background_sorted)Styles the background of cells in sorted column in 'row' layout-mode
--zg-cell-background_sortedBrowser's default valueStyles the background of cells in sorted column
--zg-cell-border0Styles the border of cells
--zg-cell-border-bottomvar(--zg-cell-border, 0)Styles the bottom border of cells
--zg-cell-border-bottom_layout_rowvar(--zg-cell-border_layout_row, var(--zg-cell-border-bottom, var(--zg-cell-border, 0)))Styles the bottom border of cells in 'row' layout-mode
--zg-cell-border-leftvar(--zg-cell-border, 0)Styles the left border of cells
--zg-cell-border-left_layout_rowvar(--zg-cell-border_layout_row, var(--zg-cell-border-left, var(--zg-cell-border, 0)))Styles the left border of cells in 'row' layout-mode
--zg-cell-border-rightvar(--zg-cell-border, 0)Styles the right border of cells
--zg-cell-border-right_layout_rowvar(--zg-cell-border_layout_row, var(--zg-cell-border-right, var(--zg-cell-border, 0)))Styles the right border of cells in 'row' layout-mode
--zg-cell-border-topvar(--zg-cell-border, 0)Styles the top border of cells
--zg-cell-border-top_layout_rowvar(--zg-cell-border_layout_row, var(--zg-cell-border-top, var(--zg-cell-border, 0)))Styles the top border of cells in 'row' layout-mode
--zg-cell-border_layout_rowvar(--zg-cell-border-bottom, var(--zg-cell-border, 0))Styles the border of cells in 'row' layout-mode
--zg-cell-colorinheritStyles font color of text in cells
--zg-cell-color_hovervar(--zg-cell-color)Styles font color of cells on hover
--zg-cell-color_hover_layout_rowvar(--zg-cell-color_hover, var(--zg-cell-color))Styles font color of cells in 'row' layout-mode on hover
--zg-cell-color_layout_rowvar(--zg-cell-color, inherit)Styles font color of text in cells in 'row' layout-mode
--zg-cell-color_layout_row_sortedvar(--zg-cell-color_sorted, var(--zg-cell-color))Sets the font color of cells in sorted column in 'row' layout-mode
--zg-cell-color_sortedvar(--zg-cell-color)Sets the font color of cells in sorted column
--zg-cell-content-border-bottom_layout_cardvar(--zg-cell-content-border_layout_card, 0)Styles the bottom border of card items in 'card' layout-mode
--zg-cell-content-border-left_layout_cardvar(--zg-cell-content-border_layout_card, 0)Styles the left border of card items in 'card' layout-mode
--zg-cell-content-border-right_layout_cardvar(--zg-cell-content-border_layout_card, 0)Styles the right border of card items in 'card' layout-mode
--zg-cell-content-border-top_layout_cardvar(--zg-cell-content-border_layout_card, 0)Styles the top border of card items in 'card' layout-mode
--zg-cell-content-border_layout_card0Styles the border of card items in 'card' layout-mode
--zg-cell-content-font-size_layout_cardinheritSets the font size of cards in 'card' layout-mode
--zg-cell-content-padding_layout_card3px 0Sets the padding of cards in 'card' layout-mode
--zg-cell-font-familyinheritSets the font family in cells
--zg-cell-font-family_layout_rowvar(--zg-cell-font-family, inherit)Sets the font family in cells in 'row' layout-mode
--zg-cell-font-sizeinheritSets the font size in cells
--zg-cell-font-size_layout_rowvar(--zg-cell-font-size, inherit)Sets the font size in cells in 'row' layout-mode
--zg-cell-font-styleinheritSets the font style in cells
--zg-cell-font-style_layout_rowvar(--zg-cell-font-style, inherit)Sets the font style in cells in 'row' layout-mode
--zg-cell-font-weightinheritSets the font weight in cells
--zg-cell-font-weight_layout_rowvar(--zg-cell-font-weight, inherit)Sets the font weight in cells in 'row' layout-mode
--zg-cell-heightautoSets height of cells
--zg-cell-height_layout_rowvar(--zg-cell-height, auto)Sets height of cells in 'row' layout-mode
--zg-cell-label-color_layout_cardvar(--theme-color-primary)Sets font color of label in cards in 'card' layout-mode
--zg-cell-label-display_layout_cardflexSets the display of label in cards in 'card' layout-mode
--zg-cell-label-font-size_layout_card85%Sets font size of label in cards in 'card' layout-mode
--zg-cell-label-font-weight_layout_cardBrowser's default valueSets font weight of label in cards in 'card' layout-mode
--zg-cell-label-margin_layout_card0 0 2pxSets the margin of label in cards in 'card' layout-mode
--zg-cell-label-overflow_layout_cardBrowser's default valueSets the overflow of label in cards in 'card' layout-mode
--zg-cell-label-transform_layout_cardBrowser's default valueSets transform of label in cards in 'card' layout-mode
--zg-cell-line-heightinheritSets line height of cells
--zg-cell-line-height_layout_rowvar(--zg-cell-line-height, inherit)Sets line height of cells in 'row' layout-mode
--zg-cell-paddingvar(--theme-padding_y) var(--theme-padding_x)Sets padding of cells
--zg-cell-padding_layout_rowvar(--zg-cell-padding, var(--theme-padding_y) var(--theme-padding_x))Sets padding of cells in 'row' layout-mode
--zg-cell-transitionBrowser's default valueSets the transition of cells
--zg-cell-transition_layout_rowvar(--zg-cell-transition)Sets the transition of cells in 'row' layout-mode
--zg-cell-vertical-alignmiddleSets vertical alignment of items in cells
--zg-cell-vertical-align_layout_rowvar(--zg-cell-vertical-align, middle)Sets vertical alignment of items in cells in 'row' layout-mode

CSS Selector

<zg-cell> can be styled by common CSS selectors.

zg-cell {
  background: red;
}