rtk-grid (2)

Last updated Oct 19, 2026 The main grid component which abstracts all the grid handling logic and renders it for you.

Properties

Property Type Required Default Description
aspectRatio string ✅ - The aspect ratio of each participant
config UIConfig ❌ createDefaultConfig() Config object
gap number ✅ - Gap between participants
gridSize GridSize ✅ - Grid size
iconPack IconPack ❌ defaultIconPack Icon pack
layout GridLayout ✅ - Grid Layout
meeting Meeting ✅ - Meeting object
overrides any ✅ - Deprecated
size Size ✅ - Size
states States ✅ - States
t RtkI18n ❌ useLanguage() Language

Usage Examples

Basic Usage

<rtk-grid></rtk-grid>

With Properties

<rtk-grid
 aspectRatio="example"
 gridSize="md"
 size="md">
</rtk-grid>

<script>
  const el = document.querySelector("rtk-grid");

  el.meeting = meeting;
  el.gap = 42;
</script>

Was this helpful?

YesNo

On this page

rtk-grid (2) - 图1Docs

{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/core/rtk-grid/#page","headline":"rtk-grid","description":"API reference for rtk-grid component (Web Components (HTML) Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/core/rtk-grid/","inLanguage":"en","image":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/core/rtk-grid/og.png?v=fc43d4abae41eea7","dateModified":"2026-10-19","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}

description: API reference for rtk-grid-pagination component (Web Components (HTML) Library) title: rtk-grid-pagination image: https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/core/rtk-grid-pagination/og.png?v=fa06c0bef78201f2

Skip to content

Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt
Use this file to discover all available pages before exploring further.