LiveKit docs › Components › GridLayout

---

# GridLayout

The `GridLayout` component displays the nested participants in a grid where every participants has the same size. It also supports pagination if there are more participants than the grid can display.

## Import

```typescript
import { GridLayout } from "@livekit/components-react";

```

## Remarks

To ensure visual stability when tiles are reordered due to track updates, the component uses the `useVisualStableUpdate` hook.

## Usage

```tsx
<LiveKitRoom>
  <GridLayout tracks={tracks}>
    <ParticipantTile />
  </GridLayout>
<LiveKitRoom>

```

## Properties

- **`children`** _(React.ReactNode)_: 

- **`tracks`** _(TrackReferenceOrPlaceholder[])_:

---

This document was rendered at 2026-06-07T11:32:08.222Z.
For the latest version of this document, see [https://docs.livekit.io/reference/components/react/component/gridlayout.md](https://docs.livekit.io/reference/components/react/component/gridlayout.md).

To explore all LiveKit documentation, see [llms.txt](https://docs.livekit.io/llms.txt).