GridLayout
function GridLayout(__namedParameters): Element;Defined in: packages/react/src/components/layout/GridLayout.tsx:51
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.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | GridLayoutProps |
Returns
Element
Example
// Basic — render participants in an equal-size grid.
<GridLayout participants={participants} perPage={6} />
// Advanced — show cameras and screen shares in a room grid.
function Gallery() {
const tracks = useTracks([
{ source: Track.Source.Camera, withPlaceholder: true },
{ source: Track.Source.ScreenShare, withPlaceholder: false },
]);
return (
<VoiceRoom agent={agent}>
<GridLayout tracks={tracks}><ParticipantTile /></GridLayout>
</VoiceRoom>
);
}