LiveKit docs › Hooks › useGridLayout

---

# useGridLayout

The `useGridLayout` hook tries to select the best layout to fit all tiles. If the available screen space is not enough, it will reduce the number of maximum visible tiles and select a layout that still works visually within the given limitations. As the order of tiles changes over time, the hook tries to keep visual updates to a minimum while trying to display important tiles such as speaking participants or screen shares.

## Import

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

```

## Usage

```tsx
const { layout } = useGridLayout(gridElement, trackCount);

```

## Properties

- **`gridElement`** _(React.RefObject<HTMLDivElement>)_: 

- **`trackCount`** _(number)_: 

- **`undefined`** _(undefined)_: 

## Returns

```typescript
{
  layout: GridLayoutInfo;
  containerWidth: number;
  containerHeight: number;
}

```

---

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

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