> For the complete documentation index, see [llms.txt](https://docs.whereby.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.whereby.com/whereby-for-web-browser/react-based-browser-sdk/grid-logic.md).

# Grid logic

The `<VideoGrid />` component is simple to use, but it contains a set of complex rules that decide how the various video cells are rendered.

## Layouts

The `<VideoGrid />` component consists of three specific grid layouts:\
`Presentationgrid`, `Videogrid` and `Subgrid`.

<figure><img src="/files/1LTAXvAKtPolIsI40v99" alt=""><figcaption></figcaption></figure>

The placement of the grids will change depending on container size, number of presentations and number of participants in the video and subgrid. For example, if there are no active presentations, the video grid will fill the presentation space. The same rule applies to the subgrid.

## Participant distribution

The selection of which participants reside in which grid section is decided based on a set of rules:

### Presentationgrid

The presentation grid consists of all screen shares and spotlighted participants.

### Videogrid

The video grid consists of all participants that have enabled video, are not spotlighted, and are not in the subgrid. By default, the `Videogrid` can have 12 active video cells. However, this is can be customised.

### Subgrid

The general rule is that all participants with their video off, will move to the subgrid. Any participant joining after the video limit in the `Videogrid` is reached, will also be automatically moved into the subgrid.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.whereby.com/whereby-for-web-browser/react-based-browser-sdk/grid-logic.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.