---
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/api/tags/zg-layout-controls
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-layout-controls.md
mode: provenance
representation: markdown
origin_response_id: 30542580f5882d7800be2d8c62ad4311
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.638Z
version_nonce: 7b833e61f795135f8d3c77962a5f960a
generated_at_utc: 2026-11-08T23:36:17.628Z
response_nonce: cfdddf1c1e27b12d95d0df3f2ff937d0
```

# `<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/v2/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 |
| [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.