experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/tags/zg-layout-controls
mode: provenance
representation: html
origin_response_id: 3c1d454ad7c0439251089305418e8f24
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.769Z
version_nonce: 24d603c66ca7aea403f64f55b5decf76
generated_at_utc: 2026-11-08T23:26:25.331Z
response_nonce: 345984d647aaf3dd7cbb512ae0791467
Docs Version 1

<zg-layout-controls>

The <zg-layout-controls> tag is a container for the icons that toggle between row mode and card mode for the grid. The <zg-layout-controls> web component is created internally and should not be placed directly in the user's HTML; however, the user can style <zg-layout-controls> using CSS variables and the zg-layout-controls selector.

Image of the DOM relationship for the zg-layout-controls web component tag

ZGLayoutControls Relationships
Component Relationship Type Ancestor
ZGControlBar Parent Generated n/a
ZingGrid Parent Generated n/a
ZGButton Child Generated n/a
ZGText Child Generated n/a

Related Web Components

Usage

<zg-layout-controls> allows you to switch between normal row mode and condensed card mode for the grid. You can set these toggle controls with the layout-controls attribute on the <zing-grid> tag.

<zing-grid layout-controls
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
</zing-grid>
Top

Attributes

There are no attributes available for the <zg-layout-controls> web component.

Top

CSS Variables

There are no CSS variables available for the <zg-layout-controls> web component.

Top

CSS Selector

<zg-layout-controls> can be styled with common CSS variables using the zg-layout-controls selector, like so:

zg-layout-controls {
  background: red;
}
Top

Slots

There are no slots available for the <zg-layout-controls> web component.

Top

[api: <zg-layout-controls>]