{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"PageGrid Component","siteUrl":"https://xrpl.org","llmstxt":{"hide":false,"title":"XRPL Developer Portal & Documentation","description":"Explore XRP Ledger documentation, blogs, and other blockchain developer resources needed to start building and integrating with the ledger.","details":{"content":"XRP Ledger concepts, use cases, tutorials, references, and other blockchain developer resources. Also, stay up to date with release announcements and more through the XRPL Blog."},"sections":[{"title":"Introduction","description":"A high-level introduction to the XRP Ledger.","includeFiles":["docs/introduction/**/*.*","about/faq.md"],"excludeFiles":["docs/introduction/index.md"]},{"title":"Use Cases","description":"Real-world applications and business scenarios for the XRP Ledger.","includeFiles":["docs/use-cases/**/*.*"],"excludeFiles":["docs/use-cases/index.md","docs/use-cases/defi/index.md"]},{"title":"Agentic Transactions","description":"XRPL AI Starter Kit to help autonomous agents discover, set up, and execute agentic transactions on the XRP Ledger.","includeFiles":["docs/agents/**/*.*"]},{"title":"Concepts","description":"Core concepts including accounts, tokens, transactions, consensus, and more.","includeFiles":["docs/concepts/**/*.*"],"excludeFiles":["docs/concepts/index.md","docs/concepts/decentralized-storage/index.md","docs/concepts/payment-types/index.md"]},{"title":"Tutorials","description":"Step-by-step guides for building on the XRP Ledger in JavaScript, Python, Go, and more.","includeFiles":["docs/tutorials/**/*.*"]},{"title":"References","description":"Protocol specification, transaction types, ledger entries, and API methods.","includeFiles":["docs/references/**/*.*"],"excludeFiles":["docs/references/xrp-api.md","docs/references/data-api.md","docs/references/protocol/index.md","docs/references/protocol/ledger-data/ledger-entry-types/index.md","docs/references/protocol/transactions/index.md","docs/references/protocol/transactions/types/index.md","docs/references/http-websocket-apis/api-conventions/index.md","docs/references/http-websocket-apis/public-api-methods/*/index.md","docs/references/http-websocket-apis/admin-api-methods/*/index.md"]},{"title":"Infrastructure","description":"Install, configure, and troubleshoot xrpld and Clio servers.","includeFiles":["docs/infrastructure/**/*.*"],"excludeFiles":["docs/infrastructure/index.md","docs/infrastructure/*/index.md","docs/infrastructure/installation/build-run-xrpld-in-reporting-mode.md","docs/infrastructure/configuration/data-retention/index.md","docs/infrastructure/configuration/server-modes/index.md"]},{"title":"Blog (2023+)","description":"Recent XRPL Blog posts (showing 2023 and newer).","includeFiles":["blog/2023/**/*.*","blog/2024/**/*.*","blog/2025/**/*.*","blog/2026/**/*.*"]},{"title":"Resources","description":"Developer resources and contribution guidelines.","includeFiles":["resources/**/*.*"]}]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"pagegrid-component","__idx":0},"children":["PageGrid Component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A responsive grid system component for creating flexible layouts with support for multiple breakpoints."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The PageGrid component provides a flexible grid layout system with three main components:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PageGrid"]}," - The container component"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PageGrid.Row"]}," - Row component for grouping columns"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PageGrid.Col"]}," - Column component with responsive sizing and offset support"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"breakpoints","__idx":2},"children":["Breakpoints"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The grid system supports the following breakpoints:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["base"]}," - Default/mobile (applies to all sizes)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sm"]}," - Small screens"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["md"]}," - Medium screens"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lg"]}," - Large screens"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["xl"]}," - Extra large screens"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":3},"children":["Basic Usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { PageGrid } from '@/shared/components/PageGrid/page-grid';\n\nfunction MyComponent() {\n return (\n \n \n \n Column 1\n \n \n Column 2\n \n \n \n );\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"pagegrid-props","__idx":4},"children":["PageGrid Props"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The root ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PageGrid"]}," component accepts all standard HTML div attributes:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Prop"},"children":["Prop"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["containerType"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"standard\" | \"wide\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"standard\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Container layout type. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#container-types"},"children":["Container types"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["as"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["React.ElementType"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"div\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Polymorphic element"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes to apply"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["...rest"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["HTMLDivElement attributes"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Any other HTML div attributes"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"container-types","__idx":5},"children":["Container types"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Value"},"children":["Value"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Behavior"},"children":["Behavior"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"standard\""]}," (default)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The standard container width and padding."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"wide\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Adds ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__container--wide"]},": no horizontal padding below ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["xl"]},", 80px at ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["xl"]},", then 112px padding with a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["1504px"]}," max-width at ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["xxl"]},". Use for full-bleed-ish sections that should still align to the grid."]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"\n \n Wide section\n \n\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"pagegridrow-props","__idx":6},"children":["PageGrid.Row Props"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PageGrid.Row"]}," component accepts all standard HTML div attributes:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Prop"},"children":["Prop"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["as"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["React.ElementType"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"div\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Polymorphic element — e.g. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"ul\""]}," for semantic list markup"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes to apply"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["...rest"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["HTMLDivElement attributes"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Any other HTML div attributes"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"pagegridcol-props","__idx":7},"children":["PageGrid.Col Props"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Prop"},"children":["Prop"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["as"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["React.ElementType"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"div\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Polymorphic element — e.g. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"li\""]}," for semantic list markup"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["span"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["number | \"auto\" | \"fill\" | ResponsiveValue"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Column span width"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["offset"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["number | ResponsiveValue"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Column offset (left margin)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes to apply"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["...rest"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["HTMLDivElement attributes"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Any other HTML div attributes"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"semantic-lists-with-as","__idx":8},"children":["Semantic lists with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["as"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a grid of items is genuinely a list, render the row as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ul"]}," and the columns"," ","as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["li"]}," so the markup carries the right semantics:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"\n Item one\n Item two\n\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["_page-grid.scss"]}," includes an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["li.bds-grid__col"]}," rule that strips list-item"," ","defaults so flex layout and width calculations still apply. This is the pattern"," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/es-es/shared/sections/cardstextgrid/readme"},"children":["CardsTextGrid"]}," and"," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/es-es/shared/sections/cardsicongrid/readme"},"children":["CardsIconGrid"]}," use, via"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardTextIconCard"]},"'s ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["gridColSpan"]}," prop."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"span-values","__idx":9},"children":["Span Values"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Number"]}," (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["1-12"]},"): Fixed column width"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["\"auto\""]},": Column takes up only the space it needs"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["\"fill\""]},": Column fills remaining available space"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive Object"]},": Different spans for different breakpoints"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"offset-values","__idx":10},"children":["Offset Values"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Number"]}," (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["1-12"]},"): Number of columns to offset"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive Object"]},": Different offsets for different breakpoints"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":11},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"fixed-column-widths","__idx":12},"children":["Fixed Column Widths"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"\n \n Sidebar\n Main Content\n \n\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"auto-and-fill","__idx":13},"children":["Auto and Fill"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"\n \n Minimal Width\n Takes Remaining Space\n Another Auto\n \n\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"responsive-layout","__idx":14},"children":["Responsive Layout"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create layouts that adapt to different screen sizes:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"\n \n \n Responsive Column\n \n \n\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"using-offsets","__idx":15},"children":["Using Offsets"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Center content or create spacing with offsets:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"\n \n {/* Center an 8-column element */}\n \n Centered Content\n \n \n\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"responsive-offsets","__idx":16},"children":["Responsive Offsets"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"\n \n \n Content\n \n \n\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"complex-responsive-layout","__idx":17},"children":["Complex Responsive Layout"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"\n \n {/* Hero section */}\n \n

Page Title

\n \n \n \n \n {/* Sidebar - full width on mobile, 1/3 on desktop */}\n \n \n \n \n {/* Main content - full width on mobile, 2/3 on desktop */}\n \n
Main Content
\n \n \n\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"multiple-columns-with-equal-width","__idx":18},"children":["Multiple Columns with Equal Width"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"\n \n Column 1\n Column 2\n Column 3\n Column 4\n \n\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"nested-grids","__idx":19},"children":["Nested Grids"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"\n \n \n \n \n Nested Column 1\n Nested Column 2\n \n \n \n \n\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"css-classes-generated","__idx":20},"children":["CSS Classes Generated"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component generates the following CSS classes:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"container","__idx":21},"children":["Container"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__container"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__container--wide"]}," (when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["containerType=\"wide\""]},")"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"row","__idx":22},"children":["Row"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__row"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"column-spans","__idx":23},"children":["Column Spans"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__col-{number}"]}," (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__col-6"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__col-auto"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__col"]}," (for fill)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__col-{breakpoint}-{number}"]}," (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__col-md-6"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__col-{breakpoint}-auto"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__col-{breakpoint}"]}," (for fill)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"column-offsets","__idx":24},"children":["Column Offsets"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__offset-{number}"]}," (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__offset-2"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__offset-{breakpoint}-{number}"]}," (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-grid__offset-md-2"]},")"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"typescript-types","__idx":25},"children":["TypeScript Types"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"type PageGridBreakpoint = \"base\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\ntype ResponsiveValue = T | Partial>;\ntype PageGridSpanValue = number | \"auto\" | \"fill\";\ntype PageGridOffsetValue = number;\n\ninterface PageGridProps {\n containerType?: \"standard\" | \"wide\";\n as?: React.ElementType;\n className?: string;\n // ... plus all HTMLDivElement attributes\n}\n\ninterface PageGridRowProps {\n as?: React.ElementType;\n className?: string;\n // ... plus all HTMLDivElement attributes\n}\n\ninterface PageGridColProps {\n as?: React.ElementType;\n span?: ResponsiveValue;\n offset?: ResponsiveValue;\n className?: string;\n // ... plus all HTMLDivElement attributes\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":26},"children":["Best Practices"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use semantic HTML"]},": Wrap content in appropriate semantic elements within columns"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mobile-first"]},": Start with base/mobile layout and progressively enhance for larger screens"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Keep it simple"]},": Avoid overly complex nested grid structures when possible"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Test responsiveness"]},": Verify layouts work well at all breakpoint transitions"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Accessibility"]},": Ensure grid layouts maintain logical reading order for screen readers"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"notes","__idx":27},"children":["Notes"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The total columns in the grid system is typically 12 (though this depends on your CSS implementation)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Responsive values cascade - if you don't specify a value for a breakpoint, it inherits from the previous breakpoint"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["All components forward refs, allowing you to attach refs to the underlying DOM elements"]}]}]},"headings":[{"value":"PageGrid Component","id":"pagegrid-component","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Breakpoints","id":"breakpoints","depth":2},{"value":"Basic Usage","id":"basic-usage","depth":2},{"value":"PageGrid Props","id":"pagegrid-props","depth":2},{"value":"Container types","id":"container-types","depth":3},{"value":"PageGrid.Row Props","id":"pagegridrow-props","depth":2},{"value":"PageGrid.Col Props","id":"pagegridcol-props","depth":2},{"value":"Semantic lists with as","id":"semantic-lists-with-as","depth":3},{"value":"Span Values","id":"span-values","depth":3},{"value":"Offset Values","id":"offset-values","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Fixed Column Widths","id":"fixed-column-widths","depth":3},{"value":"Auto and Fill","id":"auto-and-fill","depth":3},{"value":"Responsive Layout","id":"responsive-layout","depth":3},{"value":"Using Offsets","id":"using-offsets","depth":3},{"value":"Responsive Offsets","id":"responsive-offsets","depth":3},{"value":"Complex Responsive Layout","id":"complex-responsive-layout","depth":3},{"value":"Multiple Columns with Equal Width","id":"multiple-columns-with-equal-width","depth":3},{"value":"Nested Grids","id":"nested-grids","depth":3},{"value":"CSS Classes Generated","id":"css-classes-generated","depth":2},{"value":"Container","id":"container","depth":3},{"value":"Row","id":"row","depth":3},{"value":"Column Spans","id":"column-spans","depth":3},{"value":"Column Offsets","id":"column-offsets","depth":3},{"value":"TypeScript Types","id":"typescript-types","depth":2},{"value":"Best Practices","id":"best-practices","depth":2},{"value":"Notes","id":"notes","depth":2}],"frontmatter":{"seo":{"title":"PageGrid Component"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/components/PageGrid/page-grid.md"},"lastModified":"2026-08-18T23:49:10.000Z","isTranslationFallback":true,"pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/components/pagegrid/page-grid-1","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}