---
title: "ZingGrid Web Component: `<zg-layout-controls>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-layout-controls>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/v1/api/tags/zg-layout-controls
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/tags/zg-layout-controls.md
mode: provenance
representation: markdown
origin_response_id: 3b72e239c57f801a85fdae225d76456f
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.769Z
version_nonce: d427c6245d3b9da68d71a82f2ad031b2
generated_at_utc: 2026-11-08T23:36:18.904Z
response_nonce: 88aa0f7b898dfd8c93a2c5fa08608f24
```

# `<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](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/zg-layout-controls-web-component-dom.png "Image of the DOM relationship for the zg-layout-controls web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGControlBar](https://www.zinggrid.com/docs/api/tags/zg-control-bar) | Parent | Generated | n/a |
| [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Generated | n/a |
| [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Generated | n/a |
| [ZGText](https://www.zinggrid.com/docs/api/tags/zg-text) | Child | Generated | n/a |

#### Related Web Components

- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid/)
- [`<zg-header>`](https://www.zinggrid.com/docs/api/tags/zg-header/)
- [`<zg-button>`](https://www.zinggrid.com/docs/api/tags/zg-button/)
- [`<zg-icon>`](https://www.zinggrid.com/docs/api/tags/zg-icon/)
- [`<zg-checkbox>`](https://www.zinggrid.com/docs/api/tags/zg-checkbox/)

## 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.

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

## Attributes

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

## CSS Variables

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

## CSS Selector

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

```css
zg-layout-controls {
  background: red;
}
```

## Slots

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