diff --git a/website/scripts/page-width-regression.mjs b/website/scripts/page-width-regression.mjs
index 861ba58a6e..f9525ec508 100644
--- a/website/scripts/page-width-regression.mjs
+++ b/website/scripts/page-width-regression.mjs
@@ -15,9 +15,41 @@ const frameSelector = [
   '[class*="sectionInner"]', '[class*="_catalog_"]', '[class*="catalogHeader"]',
   '[class*="recommendedInner"]', '[class*="ctaFrameInner"]',
   '#resources [class*="Grid-module__Grid___"]',
+  '[class*="_wideFrame_"]',
 ].join(", ");
+// Catalogs beside their filter rail. 6 per page never splits, so these also run
+// at 50 per page, where the wide grid below the filters is a frame too.
+const splitRoutes = new Set([
+  "agents/", "instructions/", "skills/", "plugins/", "extensions/", "learning-hub/",
+]);
 const browser = await chromium.launch();
 
+async function checkFrames(page, colorScheme, width, route) {
+  const frames = await page.locator(frameSelector).evaluateAll(elements =>
+    elements.map(element => {
+      const box = element.getBoundingClientRect();
+      return { name: element.className, x: box.x, right: box.right, width: box.width };
+    }),
+  );
+  assert.ok(frames.length > 0, `${route}: content frames found`);
+  const header = await page.getByRole("navigation", { name: "Primary", exact: true }).boundingBox();
+  const expected = Math.min(1280, header.width);
+  for (const frame of frames) {
+    const label = `${colorScheme} ${width}px ${route || "homepage"} ${frame.name}`;
+    assert.ok(frame.width <= 1281, `${label}: maximum width is 1280px, got ${frame.width}`);
+    assert.ok(frame.x >= -1 && frame.right <= width + 1, `${label}: within viewport`);
+    if (width >= 768) {
+      assert.ok(Math.abs(frame.width - expected) <= 1, `${label}: matches header width ${expected}`);
+      assert.ok(Math.abs(frame.x - header.x) <= 1, `${label}: aligns with header`);
+    }
+  }
+  if (width >= 1600) {
+    assert.ok(Math.abs(header.width - 1280) <= 1, `${route}: desktop frame fills the 1280px cap`);
+  }
+  assert.equal(await page.evaluate(() => document.documentElement.scrollWidth > innerWidth), false,
+    `${route}: no horizontal overflow`);
+}
+
 try {
   for (const colorScheme of ["light", "dark"]) {
     const page = await browser.newPage({ colorScheme, reducedMotion: "reduce" });
@@ -28,29 +60,16 @@ try {
         assert.equal(response.status(), 200, route);
         await page.waitForFunction(() => !document.querySelector("astro-island[ssr]"));
         await page.addStyleTag({ content: "html { scrollbar-gutter: stable; }" });
-        const frames = await page.locator(frameSelector).evaluateAll(elements =>
-          elements.map(element => {
-            const box = element.getBoundingClientRect();
-            return { name: element.className, x: box.x, right: box.right, width: box.width };
-          }),
-        );
-        assert.ok(frames.length > 0, `${route}: content frames found`);
-        const header = await page.getByRole("navigation", { name: "Primary", exact: true }).boundingBox();
-        const expected = Math.min(1280, header.width);
-        for (const frame of frames) {
-          const label = `${colorScheme} ${width}px ${route || "homepage"} ${frame.name}`;
-          assert.ok(frame.width <= 1281, `${label}: maximum width is 1280px, got ${frame.width}`);
-          assert.ok(frame.x >= -1 && frame.right <= width + 1, `${label}: within viewport`);
-          if (width >= 768) {
-            assert.ok(Math.abs(frame.width - expected) <= 1, `${label}: matches header width ${expected}`);
-            assert.ok(Math.abs(frame.x - header.x) <= 1, `${label}: aligns with header`);
-          }
-        }
-        if (width >= 1600) {
-          assert.ok(Math.abs(header.width - 1280) <= 1, `${route}: desktop frame fills the 1280px cap`);
+        await checkFrames(page, colorScheme, width, route);
+        // The rail stacks above the cards below 1012px, so nothing splits there.
+        if (width >= 1024 && splitRoutes.has(route)) {
+          const trigger = page.locator('summary[aria-label^="Resource page size"]');
+          await trigger.click();
+          await page.locator("details", { has: trigger })
+            .getByRole("menuitemradio", { name: "50", exact: true }).click();
+          await page.locator('[class*="_wideFrame_"]').waitFor();
+          await checkFrames(page, colorScheme, width, `${route} at 50 per page`);
         }
-        assert.equal(await page.evaluate(() => document.documentElement.scrollWidth > innerWidth), false,
-          `${route}: no horizontal overflow`);
       }
       console.log(`PASS ${colorScheme} ${width}px: ${routes.length} page layouts share the 1280px cap`);
     }
diff --git a/website/src/components/brand/AgentsCatalog.tsx b/website/src/components/brand/AgentsCatalog.tsx
index 04c1871305..81e4bed8ac 100644
--- a/website/src/components/brand/AgentsCatalog.tsx
+++ b/website/src/components/brand/AgentsCatalog.tsx
@@ -31,6 +31,7 @@ import { daysSince, toggleValue, updatedBuckets, updatedBucketOf } from "./catal
 import { pageHref } from "./pageHref";
 import { downloadFile } from "./resourceActions";
 import { useCatalogPageFocus } from "./useCatalogPageFocus";
+import { useCatalogSplit } from "./useCatalogSplit";
 import type { SearchItem } from "./searchIndex";
 import styles from "./styles/agents.module.css";
 
@@ -201,6 +202,69 @@ export function AgentsCatalog({
   const page = Math.min(currentPage, pageCount);
   const visibleAgents = sortedAgents.slice((page - 1) * pageSize, page * pageSize);
 
+  const { filterNavRef, sideGridRef, wideGridRef, beside, below } =
+    useCatalogSplit(visibleAgents, pageSize);
+
+  const renderAgentCard = (agent: AgentItem) => (
+    <Box className={clsx(styles.item, styles.itemHover)}>
+      <Card
+        href={agentDetailHref(agent)}
+        fullWidth
+        ctaVariant="none"
+        backgroundColor="none"
+        className={styles.card}
+      >
+        <Card.Heading as="h2">{agent.title}</Card.Heading>
+        <Card.Description>
+          <span className={styles.cardDescText}>
+            {agent.description}
+          </span>
+        </Card.Description>
+      </Card>
+      <div className={styles.cardActions}>
+        <ActionMenu mode="split-button" menuAlignment="start">
+          <ActionMenu.Button
+            as="a"
+            href={installUrl(agent)}
+            variant="primary"
+          >
+            Install
+          </ActionMenu.Button>
+          <ActionMenu.Overlay
+            aria-label={`Install ${agent.title} to your editor`}
+          >
+            <ActionMenu.Item as="a" href={installUrl(agent, false)}>
+              VS Code
+            </ActionMenu.Item>
+            <ActionMenu.Item as="a" href={installUrl(agent, true)}>
+              VS Code Insiders
+            </ActionMenu.Item>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+        <Button
+          as="button"
+          variant="secondary"
+          onClick={() =>
+            void downloadFile(downloadUrl(agent), agent.filename)
+          }
+          aria-label={`Download ${agent.title} agent file`}
+          className={styles.iconButton}
+        >
+          <DownloadIcon />
+        </Button>
+        <Button
+          as="a"
+          href={agentSourceUrl(agent)}
+          variant="secondary"
+          aria-label={`View ${agent.title} agent on GitHub`}
+          className={styles.iconButton}
+        >
+          <MarkGithubIcon />
+        </Button>
+      </div>
+    </Box>
+  );
+
   return (
     <PageShell
       styles={styles}
@@ -230,7 +294,11 @@ export function AgentsCatalog({
         paddingBlockEnd="none"
       >
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter agents">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter agents"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -337,74 +405,22 @@ export function AgentsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  className={styles.threeUp}
+                  ref={sideGridRef}
+                  className={clsx(
+                    styles.threeUp,
+                    below.length > 0 && styles.threeUpSplit,
+                  )}
                   columnGap="none"
                   rowGap="none"
                   enableGutters={false}
                 >
-                  {visibleAgents.map((agent) => (
+                  {beside.map((agent) => (
                     <Grid.Column
                       key={agent.id}
                       span={{ xsmall: 12, medium: 6, large: 6 }}
                       className={styles.col}
                     >
-                      <Box className={clsx(styles.item, styles.itemHover)}>
-                        <Card
-                          href={agentDetailHref(agent)}
-                          fullWidth
-                          ctaVariant="none"
-                          backgroundColor="none"
-                          className={styles.card}
-                        >
-                          <Card.Heading as="h2">{agent.title}</Card.Heading>
-                          <Card.Description>
-                            <span className={styles.cardDescText}>
-                              {agent.description}
-                            </span>
-                          </Card.Description>
-                        </Card>
-                        <div className={styles.cardActions}>
-                          <ActionMenu mode="split-button" menuAlignment="start">
-                            <ActionMenu.Button
-                              as="a"
-                              href={installUrl(agent)}
-                              variant="primary"
-                            >
-                              Install
-                            </ActionMenu.Button>
-                            <ActionMenu.Overlay
-                              aria-label={`Install ${agent.title} to your editor`}
-                            >
-                              <ActionMenu.Item as="a" href={installUrl(agent, false)}>
-                                VS Code
-                              </ActionMenu.Item>
-                              <ActionMenu.Item as="a" href={installUrl(agent, true)}>
-                                VS Code Insiders
-                              </ActionMenu.Item>
-                            </ActionMenu.Overlay>
-                          </ActionMenu>
-                          <Button
-                            as="button"
-                            variant="secondary"
-                            onClick={() =>
-                              void downloadFile(downloadUrl(agent), agent.filename)
-                            }
-                            aria-label={`Download ${agent.title} agent file`}
-                            className={styles.iconButton}
-                          >
-                            <DownloadIcon />
-                          </Button>
-                          <Button
-                            as="a"
-                            href={agentSourceUrl(agent)}
-                            variant="secondary"
-                            aria-label={`View ${agent.title} agent on GitHub`}
-                            className={styles.iconButton}
-                          >
-                            <MarkGithubIcon />
-                          </Button>
-                        </div>
-                      </Box>
+                      {renderAgentCard(agent)}
                     </Grid.Column>
                   ))}
                 </Grid>
@@ -420,6 +436,26 @@ export function AgentsCatalog({
             ) : null}
           </Box>
         </Box>
+        {below.length > 0 ? (
+          <Box
+            className={clsx(styles.gridFrame, styles.wideFrame)}
+            data-mode={colorMode}
+          >
+            <div
+              ref={wideGridRef}
+              className={clsx(
+                styles.wideGrid,
+                page < pageCount && styles.wideGridCentered,
+              )}
+            >
+              {below.map((agent) => (
+                <div key={agent.id} className={styles.col}>
+                  {renderAgentCard(agent)}
+                </div>
+              ))}
+            </div>
+          </Box>
+        ) : null}
       </Section>
 
       <div className={styles.rule} aria-hidden="true" />
diff --git a/website/src/components/brand/ExtensionsCatalog.tsx b/website/src/components/brand/ExtensionsCatalog.tsx
index b2a1457f22..4f821cac74 100644
--- a/website/src/components/brand/ExtensionsCatalog.tsx
+++ b/website/src/components/brand/ExtensionsCatalog.tsx
@@ -43,6 +43,7 @@ import { pageHref } from "./pageHref";
 import type { SearchItem } from "./searchIndex";
 import styles from "./styles/extensions.module.css";
 import { useCatalogPageFocus } from "./useCatalogPageFocus";
+import { useCatalogSplit } from "./useCatalogSplit";
 import { buildVSCodePluginInstallUrl } from "../../lib/plugin-install";
 
 const CONTRIBUTE_URL =
@@ -249,6 +250,104 @@ export function ExtensionsCatalog({
     page * pageSize,
   );
 
+  const { filterNavRef, sideGridRef, wideGridRef, beside, below } =
+    useCatalogSplit(visibleExtensions, pageSize);
+
+  const renderExtensionCard = (ext: ExtensionItem) => {
+    const detailHref = pageHref(`extension/${ext.id}`);
+    const sourceUrl = extensionSourceUrl(ext);
+    const installUrl = appInstallUrl(ext);
+    const vscodeInstallUrl = ext.pluginName
+      ? buildVSCodePluginInstallUrl(ext.pluginName)
+      : null;
+    const safeImageUrl = httpUrl(ext.imageUrl);
+    return (
+      <Box className={clsx(styles.item, styles.itemHover)}>
+        {safeImageUrl ? (
+          <a
+            href={detailHref}
+            className={styles.cardMedia}
+            aria-label={`View ${ext.name}`}
+            tabIndex={-1}
+          >
+            <img
+              className={styles.cardImage}
+              src={safeImageUrl}
+              alt={`${ext.name} preview`}
+              loading={ext === visibleExtensions[0] ? "eager" : "lazy"}
+              decoding="async"
+              width={1280}
+              height={720}
+            />
+          </a>
+        ) : null}
+        <Card
+          href={detailHref}
+          fullWidth
+          ctaVariant="none"
+          backgroundColor="none"
+          className={styles.card}
+        >
+          <Card.Heading as="h2">{ext.name}</Card.Heading>
+          <Card.Description>
+            <span className={styles.cardDescText}>
+              {ext.description}
+            </span>
+          </Card.Description>
+        </Card>
+        <div className={styles.cardActions}>
+          {installUrl ? (
+            <Button
+              as="a"
+              href={installUrl}
+              variant="primary"
+              hasArrow={false}
+            >
+              Open in Copilot app
+            </Button>
+          ) : null}
+          {vscodeInstallUrl ? (
+            <Button
+              as="a"
+              href={vscodeInstallUrl}
+              variant="secondary"
+              hasArrow={false}
+              aria-label={`Install in VS Code: ${ext.name}`}
+            >
+              Install in VS Code
+            </Button>
+          ) : null}
+          {ext.installCommand ? (
+            <CopyInstallButton
+              ext={ext}
+              command={ext.installCommand}
+              onCopied={showCopiedToast}
+            />
+          ) : null}
+          {sourceUrl ? (
+            <Button
+              as="a"
+              href={sourceUrl}
+              variant="secondary"
+              aria-label={`View ${ext.name} on GitHub`}
+              className={styles.iconButton}
+            >
+              <MarkGithubIcon />
+            </Button>
+          ) : null}
+        </div>
+        {ext.author?.name ? (
+          <Text as="p" size="100" className={styles.cardBadge}>
+            <TypingText
+              text={ext.author.name}
+              className={styles.cardBadgeName}
+            />
+          </Text>
+        ) : null}
+      </Box>
+    );
+  };
+
   return (
     <PageShell
       styles={styles}
@@ -279,7 +378,11 @@ export function ExtensionsCatalog({
         paddingBlockEnd="none"
       >
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter extensions">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter extensions"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -386,111 +489,24 @@ export function ExtensionsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  className={styles.threeUp}
+                  ref={sideGridRef}
+                  className={clsx(
+                    styles.threeUp,
+                    below.length > 0 && styles.threeUpSplit,
+                  )}
                   columnGap="none"
                   rowGap="none"
                   enableGutters={false}
                 >
-                  {visibleExtensions.map((ext, index) => {
-                    const detailHref = pageHref(`extension/${ext.id}`);
-                    const sourceUrl = extensionSourceUrl(ext);
-                    const installUrl = appInstallUrl(ext);
-                    const vscodeInstallUrl = ext.pluginName
-                      ? buildVSCodePluginInstallUrl(ext.pluginName)
-                      : null;
-                    const safeImageUrl = httpUrl(ext.imageUrl);
-                    return (
-                      <Grid.Column
-                        key={ext.id}
-                        span={{ xsmall: 12, medium: 6, large: 6 }}
-                        className={styles.col}
-                      >
-                        <Box className={clsx(styles.item, styles.itemHover)}>
-                          {safeImageUrl ? (
-                            <a
-                              href={detailHref}
-                              className={styles.cardMedia}
-                              aria-label={`View ${ext.name}`}
-                              tabIndex={-1}
-                            >
-                              <img
-                                className={styles.cardImage}
-                                src={safeImageUrl}
-                                alt={`${ext.name} preview`}
-                                loading={index === 0 ? "eager" : "lazy"}
-                                decoding="async"
-                                width={1280}
-                                height={720}
-                              />
-                            </a>
-                          ) : null}
-                          <Card
-                            href={detailHref}
-                            fullWidth
-                            ctaVariant="none"
-                            backgroundColor="none"
-                            className={styles.card}
-                          >
-                            <Card.Heading as="h2">{ext.name}</Card.Heading>
-                            <Card.Description>
-                              <span className={styles.cardDescText}>
-                                {ext.description}
-                              </span>
-                            </Card.Description>
-                          </Card>
-                          <div className={styles.cardActions}>
-                            {installUrl ? (
-                              <Button
-                                as="a"
-                                href={installUrl}
-                                variant="primary"
-                                hasArrow={false}
-                              >
-                                Open in Copilot app
-                              </Button>
-                            ) : null}
-                            {vscodeInstallUrl ? (
-                              <Button
-                                as="a"
-                                href={vscodeInstallUrl}
-                                variant="secondary"
-                                hasArrow={false}
-                                aria-label={`Install in VS Code: ${ext.name}`}
-                              >
-                                Install in VS Code
-                              </Button>
-                            ) : null}
-                            {ext.installCommand ? (
-                              <CopyInstallButton
-                                ext={ext}
-                                command={ext.installCommand}
-                                onCopied={showCopiedToast}
-                              />
-                            ) : null}
-                            {sourceUrl ? (
-                              <Button
-                                as="a"
-                                href={sourceUrl}
-                                variant="secondary"
-                                aria-label={`View ${ext.name} on GitHub`}
-                                className={styles.iconButton}
-                              >
-                                <MarkGithubIcon />
-                              </Button>
-                            ) : null}
-                          </div>
-                          {ext.author?.name ? (
-                            <Text as="p" size="100" className={styles.cardBadge}>
-                              <TypingText
-                                text={ext.author.name}
-                                className={styles.cardBadgeName}
-                              />
-                            </Text>
-                          ) : null}
-                        </Box>
-                      </Grid.Column>
-                    );
-                  })}
+                  {beside.map((ext) => (
+                    <Grid.Column
+                      key={ext.id}
+                      span={{ xsmall: 12, medium: 6, large: 6 }}
+                      className={styles.col}
+                    >
+                      {renderExtensionCard(ext)}
+                    </Grid.Column>
+                  ))}
                 </Grid>
               </Box>
             </Box>
@@ -504,6 +520,26 @@ export function ExtensionsCatalog({
             ) : null}
           </Box>
         </Box>
+        {below.length > 0 ? (
+          <Box
+            className={clsx(styles.gridFrame, styles.wideFrame)}
+            data-mode={colorMode}
+          >
+            <div
+              ref={wideGridRef}
+              className={clsx(
+                styles.wideGrid,
+                page < pageCount && styles.wideGridCentered,
+              )}
+            >
+              {below.map((ext) => (
+                <div key={ext.id} className={styles.col}>
+                  {renderExtensionCard(ext)}
+                </div>
+              ))}
+            </div>
+          </Box>
+        ) : null}
       </Section>
 
       <div className={styles.rule} aria-hidden="true" />
diff --git a/website/src/components/brand/InstructionsCatalog.tsx b/website/src/components/brand/InstructionsCatalog.tsx
index 4d64bd061f..5b829f344c 100644
--- a/website/src/components/brand/InstructionsCatalog.tsx
+++ b/website/src/components/brand/InstructionsCatalog.tsx
@@ -21,6 +21,7 @@ import { useMemo, useState } from "react";
 import { PageShell } from "./PageShell";
 import { InstructionsIcon } from "./InstructionsIcon";
 import { useCatalogPageFocus } from "./useCatalogPageFocus";
+import { useCatalogSplit } from "./useCatalogSplit";
 import { CatalogSortControl, CATALOG_SORT_OPTIONS } from "./CatalogSortControl";
 import {
   CatalogResourceSizeControl,
@@ -208,6 +209,75 @@ export function InstructionsCatalog({
     page * pageSize,
   );
 
+  const { filterNavRef, sideGridRef, wideGridRef, beside, below } =
+    useCatalogSplit(visibleInstructions, pageSize);
+
+  const renderInstructionCard = (item: InstructionItem) => (
+    <Box className={clsx(styles.item, styles.itemHover)}>
+      <Card
+        href={pageHref(`instruction/${item.id}`)}
+        fullWidth
+        ctaVariant="none"
+        backgroundColor="none"
+        className={styles.card}
+      >
+        <Card.Heading as="h2">{item.title}</Card.Heading>
+        <Card.Description>
+          <span className={styles.cardDescText}>
+            {item.description}
+          </span>
+        </Card.Description>
+      </Card>
+      <div className={styles.cardActions}>
+        <ActionMenu mode="split-button" menuAlignment="start">
+          <ActionMenu.Button
+            as="a"
+            href={installUrl(item)}
+            variant="primary"
+          >
+            Install
+          </ActionMenu.Button>
+          <ActionMenu.Overlay
+            aria-label={`Install ${item.title} to your editor`}
+          >
+            <ActionMenu.Item
+              as="a"
+              href={installUrl(item, false)}
+            >
+              VS Code
+            </ActionMenu.Item>
+            <ActionMenu.Item
+              as="a"
+              href={installUrl(item, true)}
+            >
+              VS Code Insiders
+            </ActionMenu.Item>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+        <Button
+          as="button"
+          variant="secondary"
+          onClick={() =>
+            void downloadFile(downloadUrl(item), item.filename)
+          }
+          aria-label={`Download ${item.title} instruction file`}
+          className={styles.iconButton}
+        >
+          <DownloadIcon />
+        </Button>
+        <Button
+          as="a"
+          href={instructionSourceUrl(item)}
+          variant="secondary"
+          aria-label={`View ${item.title} instruction on GitHub`}
+          className={styles.iconButton}
+        >
+          <MarkGithubIcon />
+        </Button>
+      </div>
+    </Box>
+  );
+
   return (
     <PageShell
       styles={styles}
@@ -231,7 +301,11 @@ export function InstructionsCatalog({
 
       <Section id="catalog" tabIndex={-1} paddingBlockStart="none" paddingBlockEnd="none">
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter instructions">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter instructions"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -338,80 +412,22 @@ export function InstructionsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  className={styles.threeUp}
+                  ref={sideGridRef}
+                  className={clsx(
+                    styles.threeUp,
+                    below.length > 0 && styles.threeUpSplit,
+                  )}
                   columnGap="none"
                   rowGap="none"
                   enableGutters={false}
                 >
-                  {visibleInstructions.map((item) => (
+                  {beside.map((item) => (
                     <Grid.Column
                       key={item.id}
                       span={{ xsmall: 12, medium: 6, large: 6 }}
                       className={styles.col}
                     >
-                      <Box className={clsx(styles.item, styles.itemHover)}>
-                        <Card
-                          href={pageHref(`instruction/${item.id}`)}
-                          fullWidth
-                          ctaVariant="none"
-                          backgroundColor="none"
-                          className={styles.card}
-                        >
-                          <Card.Heading as="h2">{item.title}</Card.Heading>
-                          <Card.Description>
-                            <span className={styles.cardDescText}>
-                              {item.description}
-                            </span>
-                          </Card.Description>
-                        </Card>
-                        <div className={styles.cardActions}>
-                          <ActionMenu mode="split-button" menuAlignment="start">
-                            <ActionMenu.Button
-                              as="a"
-                              href={installUrl(item)}
-                              variant="primary"
-                            >
-                              Install
-                            </ActionMenu.Button>
-                            <ActionMenu.Overlay
-                              aria-label={`Install ${item.title} to your editor`}
-                            >
-                              <ActionMenu.Item
-                                as="a"
-                                href={installUrl(item, false)}
-                              >
-                                VS Code
-                              </ActionMenu.Item>
-                              <ActionMenu.Item
-                                as="a"
-                                href={installUrl(item, true)}
-                              >
-                                VS Code Insiders
-                              </ActionMenu.Item>
-                            </ActionMenu.Overlay>
-                          </ActionMenu>
-                          <Button
-                            as="button"
-                            variant="secondary"
-                            onClick={() =>
-                              void downloadFile(downloadUrl(item), item.filename)
-                            }
-                            aria-label={`Download ${item.title} instruction file`}
-                            className={styles.iconButton}
-                          >
-                            <DownloadIcon />
-                          </Button>
-                          <Button
-                            as="a"
-                            href={instructionSourceUrl(item)}
-                            variant="secondary"
-                            aria-label={`View ${item.title} instruction on GitHub`}
-                            className={styles.iconButton}
-                          >
-                            <MarkGithubIcon />
-                          </Button>
-                        </div>
-                      </Box>
+                      {renderInstructionCard(item)}
                     </Grid.Column>
                   ))}
                 </Grid>
@@ -427,6 +443,26 @@ export function InstructionsCatalog({
             ) : null}
           </Box>
         </Box>
+        {below.length > 0 ? (
+          <Box
+            className={clsx(styles.gridFrame, styles.wideFrame)}
+            data-mode={colorMode}
+          >
+            <div
+              ref={wideGridRef}
+              className={clsx(
+                styles.wideGrid,
+                page < pageCount && styles.wideGridCentered,
+              )}
+            >
+              {below.map((item) => (
+                <div key={item.id} className={styles.col}>
+                  {renderInstructionCard(item)}
+                </div>
+              ))}
+            </div>
+          </Box>
+        ) : null}
       </Section>
 
       <div className={styles.rule} aria-hidden="true" />
diff --git a/website/src/components/brand/LearningHubIndex.tsx b/website/src/components/brand/LearningHubIndex.tsx
index 45156045f4..ef2154d183 100644
--- a/website/src/components/brand/LearningHubIndex.tsx
+++ b/website/src/components/brand/LearningHubIndex.tsx
@@ -33,6 +33,7 @@ import { DuckIcon } from "./DuckIcon";
 import { LearningHubIcon } from "./LearningHubIcon";
 import { PageShell } from "./PageShell";
 import { useCatalogPageFocus } from "./useCatalogPageFocus";
+import { useCatalogSplit } from "./useCatalogSplit";
 import { ScrambleText } from "./ScrambleText";
 import { pageHref } from "./pageHref";
 import type { SearchItem } from "./searchIndex";
@@ -432,6 +433,46 @@ function LearningHubIndexBody({
     page * pageSize,
   );
 
+  const { filterNavRef, sideGridRef, wideGridRef, beside, below } =
+    useCatalogSplit(visibleEntries, pageSize);
+
+  const renderEntryCard = (entry: Entry) => (
+    <Box className={clsx(styles.item, styles.itemHover)}>
+      <a href={entry.href} className={styles.catalogCard}>
+        <div className={styles.recCardLabels}>
+          {entry.isNew ? (
+            <span
+              className={clsx(
+                styles.recCardLabel,
+                styles.recCardLabelAccent,
+              )}
+            >
+              New
+            </span>
+          ) : null}
+          <span className={styles.recCardLabel}>
+            {entry.topic}
+          </span>
+          <span
+            className={clsx(
+              styles.recCardLabel,
+              styles.recCardLabelOutline,
+            )}
+          >
+            {entry.kind}
+          </span>
+        </div>
+        <h3 className={styles.recCardHeading}>
+          {entry.title}
+          <ArrowUpRightIcon size={20} />
+        </h3>
+        <p className={styles.recCardDesc}>
+          {entry.description}
+        </p>
+      </a>
+    </Box>
+  );
+
   return (
     <>
       <Box className={clsx(styles.hero, "heading-texture")}>
@@ -757,7 +798,11 @@ function LearningHubIndexBody({
           </button>
         </div>
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter guide sections">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter guide sections"
+          >
             <div
               className={clsx(
                 styles.filterBody,
@@ -803,51 +848,22 @@ function LearningHubIndexBody({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  className={styles.threeUp}
+                  ref={sideGridRef}
+                  className={clsx(
+                    styles.threeUp,
+                    below.length > 0 && styles.threeUpSplit,
+                  )}
                   columnGap="none"
                   rowGap="none"
                   enableGutters={false}
                 >
-                  {visibleEntries.map((entry) => (
+                  {beside.map((entry) => (
                     <Grid.Column
                       key={entry.id}
                       span={{ xsmall: 12, medium: 6, large: 6 }}
                       className={styles.col}
                     >
-                      <Box className={clsx(styles.item, styles.itemHover)}>
-                        <a href={entry.href} className={styles.catalogCard}>
-                          <div className={styles.recCardLabels}>
-                            {entry.isNew ? (
-                              <span
-                                className={clsx(
-                                  styles.recCardLabel,
-                                  styles.recCardLabelAccent,
-                                )}
-                              >
-                                New
-                              </span>
-                            ) : null}
-                            <span className={styles.recCardLabel}>
-                              {entry.topic}
-                            </span>
-                            <span
-                              className={clsx(
-                                styles.recCardLabel,
-                                styles.recCardLabelOutline,
-                              )}
-                            >
-                              {entry.kind}
-                            </span>
-                          </div>
-                          <h3 className={styles.recCardHeading}>
-                            {entry.title}
-                            <ArrowUpRightIcon size={20} />
-                          </h3>
-                          <p className={styles.recCardDesc}>
-                            {entry.description}
-                          </p>
-                        </a>
-                      </Box>
+                      {renderEntryCard(entry)}
                     </Grid.Column>
                   ))}
                 </Grid>
@@ -863,6 +879,26 @@ function LearningHubIndexBody({
             ) : null}
           </Box>
         </Box>
+        {below.length > 0 ? (
+          <Box
+            className={clsx(styles.gridFrame, styles.wideFrame)}
+            data-mode={colorMode}
+          >
+            <div
+              ref={wideGridRef}
+              className={clsx(
+                styles.wideGrid,
+                page < pageCount && styles.wideGridCentered,
+              )}
+            >
+              {below.map((entry) => (
+                <div key={entry.id} className={styles.col}>
+                  {renderEntryCard(entry)}
+                </div>
+              ))}
+            </div>
+          </Box>
+        ) : null}
       </Section>
 
       <div className={styles.rule} aria-hidden="true" />
diff --git a/website/src/components/brand/PluginsCatalog.tsx b/website/src/components/brand/PluginsCatalog.tsx
index 1c51c94251..a4376f94ff 100644
--- a/website/src/components/brand/PluginsCatalog.tsx
+++ b/website/src/components/brand/PluginsCatalog.tsx
@@ -33,6 +33,7 @@ import { pageHref } from "./pageHref";
 import type { SearchItem } from "./searchIndex";
 import styles from "./styles/plugins.module.css";
 import { useCatalogPageFocus } from "./useCatalogPageFocus";
+import { useCatalogSplit } from "./useCatalogSplit";
 
 const CONTRIBUTE_URL =
   "https://github.com/github/awesome-copilot/blob/main/docs/README.plugins.md#how-to-contribute";
@@ -208,6 +209,61 @@ export function PluginsCatalog({
     page * pageSize,
   );
 
+  const { filterNavRef, sideGridRef, wideGridRef, beside, below } =
+    useCatalogSplit(visiblePlugins, pageSize);
+
+  const renderPluginCard = (plugin: PluginItem) => (
+    <Box className={clsx(styles.item, styles.itemHover)}>
+      <Card
+        href={pageHref(`plugin/${plugin.id}`)}
+        fullWidth
+        ctaVariant="none"
+        backgroundColor="none"
+        className={styles.card}
+      >
+        <Card.Heading as="h2">{plugin.name}</Card.Heading>
+        <Card.Description>
+          <span className={styles.cardDescText}>
+            {plugin.description}
+          </span>
+        </Card.Description>
+      </Card>
+      <div className={styles.cardActions}>
+        <Button
+          as="a"
+          href={buildVSCodePluginInstallUrl(plugin.name)}
+          variant="primary"
+          hasArrow={false}
+          aria-label={`Install in VS Code: ${plugin.name}`}
+        >
+          Install in VS Code
+        </Button>
+        <Button
+          as="a"
+          href={sourceUrlOf(plugin)}
+          variant="secondary"
+          leadingVisual={MarkGithubIcon}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          View source
+        </Button>
+      </div>
+      {plugin.author?.name ? (
+        <Text
+          as="p"
+          size="100"
+          className={clsx(
+            styles.cardBadge,
+            styles.cardBadgeAuthor,
+          )}
+        >
+          {plugin.author.name}
+        </Text>
+      ) : null}
+    </Box>
+  );
+
   return (
     <PageShell
       styles={styles}
@@ -237,7 +293,11 @@ export function PluginsCatalog({
         paddingBlockEnd="none"
       >
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter plugins">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter plugins"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -344,66 +404,22 @@ export function PluginsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  className={styles.threeUp}
+                  ref={sideGridRef}
+                  className={clsx(
+                    styles.threeUp,
+                    below.length > 0 && styles.threeUpSplit,
+                  )}
                   columnGap="none"
                   rowGap="none"
                   enableGutters={false}
                 >
-                  {visiblePlugins.map((plugin) => (
+                  {beside.map((plugin) => (
                     <Grid.Column
                       key={plugin.id}
                       span={{ xsmall: 12, medium: 6, large: 6 }}
                       className={styles.col}
                     >
-                      <Box className={clsx(styles.item, styles.itemHover)}>
-                        <Card
-                          href={pageHref(`plugin/${plugin.id}`)}
-                          fullWidth
-                          ctaVariant="none"
-                          backgroundColor="none"
-                          className={styles.card}
-                        >
-                          <Card.Heading as="h2">{plugin.name}</Card.Heading>
-                          <Card.Description>
-                            <span className={styles.cardDescText}>
-                              {plugin.description}
-                            </span>
-                          </Card.Description>
-                        </Card>
-                        <div className={styles.cardActions}>
-                          <Button
-                            as="a"
-                            href={buildVSCodePluginInstallUrl(plugin.name)}
-                            variant="primary"
-                            hasArrow={false}
-                            aria-label={`Install in VS Code: ${plugin.name}`}
-                          >
-                            Install in VS Code
-                          </Button>
-                          <Button
-                            as="a"
-                            href={sourceUrlOf(plugin)}
-                            variant="secondary"
-                            leadingVisual={MarkGithubIcon}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            View source
-                          </Button>
-                        </div>
-                        {plugin.author?.name ? (
-                          <Text
-                            as="p"
-                            size="100"
-                            className={clsx(
-                              styles.cardBadge,
-                              styles.cardBadgeAuthor,
-                            )}
-                          >
-                            {plugin.author.name}
-                          </Text>
-                        ) : null}
-                      </Box>
+                      {renderPluginCard(plugin)}
                     </Grid.Column>
                   ))}
                 </Grid>
@@ -419,6 +435,26 @@ export function PluginsCatalog({
             ) : null}
           </Box>
         </Box>
+        {below.length > 0 ? (
+          <Box
+            className={clsx(styles.gridFrame, styles.wideFrame)}
+            data-mode={colorMode}
+          >
+            <div
+              ref={wideGridRef}
+              className={clsx(
+                styles.wideGrid,
+                page < pageCount && styles.wideGridCentered,
+              )}
+            >
+              {below.map((plugin) => (
+                <div key={plugin.id} className={styles.col}>
+                  {renderPluginCard(plugin)}
+                </div>
+              ))}
+            </div>
+          </Box>
+        ) : null}
       </Section>
 
       <div className={styles.rule} aria-hidden="true" />
diff --git a/website/src/components/brand/SkillsCatalog.tsx b/website/src/components/brand/SkillsCatalog.tsx
index a08bcf6cd1..d6e98272d0 100644
--- a/website/src/components/brand/SkillsCatalog.tsx
+++ b/website/src/components/brand/SkillsCatalog.tsx
@@ -19,6 +19,7 @@ import React, { useMemo, useState } from "react";
 
 import { PageShell } from "./PageShell";
 import { useCatalogPageFocus } from "./useCatalogPageFocus";
+import { useCatalogSplit } from "./useCatalogSplit";
 import { CatalogSortControl, CATALOG_SORT_OPTIONS } from "./CatalogSortControl";
 import {
   CatalogResourceSizeControl,
@@ -183,6 +184,58 @@ export function SkillsCatalog({
   const page = Math.min(currentPage, pageCount);
   const visibleSkills = sortedSkills.slice((page - 1) * pageSize, page * pageSize);
 
+  const { filterNavRef, sideGridRef, wideGridRef, beside, below } =
+    useCatalogSplit(visibleSkills, pageSize);
+
+  const renderSkillCard = (skill: SkillItem) => (
+    <Box className={clsx(styles.item, styles.itemHover)}>
+      <Card
+        href={pageHref(`skill/${skill.id}`)}
+        fullWidth
+        ctaVariant="none"
+        backgroundColor="none"
+        className={styles.card}
+      >
+        <Card.Heading as="h2">{skill.title}</Card.Heading>
+        <Card.Description>
+          <span className={styles.cardDescText}>
+            {skill.description}
+          </span>
+        </Card.Description>
+      </Card>
+      <div className={styles.cardActions}>
+        <Button
+          variant="primary"
+          hasArrow={false}
+          leadingVisual={CopyIcon}
+          onClick={() => copyInstall(skill)}
+        >
+          Copy install
+        </Button>
+        <Button
+          as="button"
+          variant="secondary"
+          onClick={() =>
+            void downloadFile(downloadUrl(skill), "SKILL.md")
+          }
+          aria-label={`Download ${skill.title} skill file`}
+          className={styles.iconButton}
+        >
+          <DownloadIcon />
+        </Button>
+        <Button
+          as="a"
+          href={skillSourceUrl(skill)}
+          variant="secondary"
+          aria-label={`View ${skill.title} skill on GitHub`}
+          className={styles.iconButton}
+        >
+          <MarkGithubIcon />
+        </Button>
+      </div>
+    </Box>
+  );
+
   return (
     <PageShell
       styles={styles}
@@ -208,7 +261,11 @@ export function SkillsCatalog({
 
       <Section id="catalog" tabIndex={-1} paddingBlockStart="none" paddingBlockEnd="none">
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter skills">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter skills"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -313,63 +370,22 @@ export function SkillsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  className={styles.threeUp}
+                  ref={sideGridRef}
+                  className={clsx(
+                    styles.threeUp,
+                    below.length > 0 && styles.threeUpSplit,
+                  )}
                   columnGap="none"
                   rowGap="none"
                   enableGutters={false}
                 >
-                  {visibleSkills.map((skill) => (
+                  {beside.map((skill) => (
                     <Grid.Column
                       key={skill.id}
                       span={{ xsmall: 12, medium: 6, large: 6 }}
                       className={styles.col}
                     >
-                      <Box className={clsx(styles.item, styles.itemHover)}>
-                        <Card
-                          href={pageHref(`skill/${skill.id}`)}
-                          fullWidth
-                          ctaVariant="none"
-                          backgroundColor="none"
-                          className={styles.card}
-                        >
-                          <Card.Heading as="h2">{skill.title}</Card.Heading>
-                          <Card.Description>
-                            <span className={styles.cardDescText}>
-                              {skill.description}
-                            </span>
-                          </Card.Description>
-                        </Card>
-                        <div className={styles.cardActions}>
-                          <Button
-                            variant="primary"
-                            hasArrow={false}
-                            leadingVisual={CopyIcon}
-                            onClick={() => copyInstall(skill)}
-                          >
-                            Copy install
-                          </Button>
-                          <Button
-                            as="button"
-                            variant="secondary"
-                            onClick={() =>
-                              void downloadFile(downloadUrl(skill), "SKILL.md")
-                            }
-                            aria-label={`Download ${skill.title} skill file`}
-                            className={styles.iconButton}
-                          >
-                            <DownloadIcon />
-                          </Button>
-                          <Button
-                            as="a"
-                            href={skillSourceUrl(skill)}
-                            variant="secondary"
-                            aria-label={`View ${skill.title} skill on GitHub`}
-                            className={styles.iconButton}
-                          >
-                            <MarkGithubIcon />
-                          </Button>
-                        </div>
-                      </Box>
+                      {renderSkillCard(skill)}
                     </Grid.Column>
                   ))}
                 </Grid>
@@ -385,6 +401,26 @@ export function SkillsCatalog({
             ) : null}
           </Box>
         </Box>
+        {below.length > 0 ? (
+          <Box
+            className={clsx(styles.gridFrame, styles.wideFrame)}
+            data-mode={colorMode}
+          >
+            <div
+              ref={wideGridRef}
+              className={clsx(
+                styles.wideGrid,
+                page < pageCount && styles.wideGridCentered,
+              )}
+            >
+              {below.map((skill) => (
+                <div key={skill.id} className={styles.col}>
+                  {renderSkillCard(skill)}
+                </div>
+              ))}
+            </div>
+          </Box>
+        ) : null}
       </Section>
 
       <div className={styles.rule} aria-hidden="true" />
diff --git a/website/src/components/brand/styles/agents.module.css b/website/src/components/brand/styles/agents.module.css
index df8e237fc4..69c8f9c087 100644
--- a/website/src/components/brand/styles/agents.module.css
+++ b/website/src/components/brand/styles/agents.module.css
@@ -1085,6 +1085,11 @@
       var(--brand-color-border-muted);
   }
 
+  /* Split page: the wide grid below draws the line under these cards. */
+  .threeUpSplit {
+    border-block-end: 0;
+  }
+
   /* Four-up stats row */
   .fourUp .item {
     border-block-start: 0;
@@ -1097,6 +1102,70 @@
   }
 }
 
+/* Cards past the end of the filter list move to a wider grid below the
+   catalog, inside the same frame: as many columns of at least 23rem as fit
+   (three in the 1280px frame). The frame draws the top and left gridlines,
+   and the right one beside an unfilled last row; each cell draws its own
+   right and bottom lines. It sits in the catalog's Section, so it shares the
+   1280px cap and, below 120rem, the same gutter inset as .catalog. */
+.wideFrame {
+  width: auto;
+  container-type: inline-size;
+  border-inline-start: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  background-image: linear-gradient(
+    var(--brand-color-border-muted),
+    var(--brand-color-border-muted)
+  );
+  background-size: var(--brand-borderWidth-thin) 100%;
+  background-position: 100% 0;
+  background-repeat: no-repeat;
+}
+
+@media screen and (max-width: 119.99rem) {
+  .wideFrame {
+    margin-inline: var(--page-gutter);
+  }
+}
+
+.wideGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
+}
+
+.wideGrid .item {
+  border-block-start: 0;
+  border-inline-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  border-block-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+}
+
+/* Except on the last page, a short last row in the three-column wide grid
+   (3 x 23rem of frame) is centered: one card sits under the middle column,
+   and two cards shift half a column, so the middle card's sides above meet
+   the middle of their top edges. The first shifted card draws its own left
+   line. Two columns never end short before the last page, because page sizes
+   are even and the side grid holds whole rows of two. */
+@container (width >= 69rem) {
+  .wideGridCentered > .col:nth-child(3n + 1):last-child {
+    position: relative;
+    inset-inline-start: 100%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2),
+  .wideGridCentered > .col:nth-child(3n + 2):last-child {
+    position: relative;
+    inset-inline-start: 50%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):last-child .item,
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2) .item {
+    border-inline-start: var(--brand-borderWidth-thin) solid
+      var(--brand-color-border-muted);
+  }
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/extensions.module.css b/website/src/components/brand/styles/extensions.module.css
index 53ba04d965..545d4f3df3 100644
--- a/website/src/components/brand/styles/extensions.module.css
+++ b/website/src/components/brand/styles/extensions.module.css
@@ -1189,6 +1189,11 @@
       var(--brand-color-border-muted);
   }
 
+  /* Split page: the wide grid below draws the line under these cards. */
+  .threeUpSplit {
+    border-block-end: 0;
+  }
+
   /* Four-up stats row */
   .fourUp .item {
     border-block-start: 0;
@@ -1201,6 +1206,70 @@
   }
 }
 
+/* Cards past the end of the filter list move to a wider grid below the
+   catalog, inside the same frame: as many columns of at least 23rem as fit
+   (three in the 1280px frame). The frame draws the top and left gridlines,
+   and the right one beside an unfilled last row; each cell draws its own
+   right and bottom lines. It sits in the catalog's Section, so it shares the
+   1280px cap and, below 120rem, the same gutter inset as .catalog. */
+.wideFrame {
+  width: auto;
+  container-type: inline-size;
+  border-inline-start: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  background-image: linear-gradient(
+    var(--brand-color-border-muted),
+    var(--brand-color-border-muted)
+  );
+  background-size: var(--brand-borderWidth-thin) 100%;
+  background-position: 100% 0;
+  background-repeat: no-repeat;
+}
+
+@media screen and (max-width: 119.99rem) {
+  .wideFrame {
+    margin-inline: var(--page-gutter);
+  }
+}
+
+.wideGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
+}
+
+.wideGrid .item {
+  border-block-start: 0;
+  border-inline-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  border-block-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+}
+
+/* Except on the last page, a short last row in the three-column wide grid
+   (3 x 23rem of frame) is centered: one card sits under the middle column,
+   and two cards shift half a column, so the middle card's sides above meet
+   the middle of their top edges. The first shifted card draws its own left
+   line. Two columns never end short before the last page, because page sizes
+   are even and the side grid holds whole rows of two. */
+@container (width >= 69rem) {
+  .wideGridCentered > .col:nth-child(3n + 1):last-child {
+    position: relative;
+    inset-inline-start: 100%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2),
+  .wideGridCentered > .col:nth-child(3n + 2):last-child {
+    position: relative;
+    inset-inline-start: 50%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):last-child .item,
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2) .item {
+    border-inline-start: var(--brand-borderWidth-thin) solid
+      var(--brand-color-border-muted);
+  }
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/instructions.module.css b/website/src/components/brand/styles/instructions.module.css
index feb93ca258..c6723042d5 100644
--- a/website/src/components/brand/styles/instructions.module.css
+++ b/website/src/components/brand/styles/instructions.module.css
@@ -1074,6 +1074,11 @@
       var(--brand-color-border-muted);
   }
 
+  /* Split page: the wide grid below draws the line under these cards. */
+  .threeUpSplit {
+    border-block-end: 0;
+  }
+
   /* Four-up stats row */
   .fourUp .item {
     border-block-start: 0;
@@ -1086,6 +1091,70 @@
   }
 }
 
+/* Cards past the end of the filter list move to a wider grid below the
+   catalog, inside the same frame: as many columns of at least 23rem as fit
+   (three in the 1280px frame). The frame draws the top and left gridlines,
+   and the right one beside an unfilled last row; each cell draws its own
+   right and bottom lines. It sits in the catalog's Section, so it shares the
+   1280px cap and, below 120rem, the same gutter inset as .catalog. */
+.wideFrame {
+  width: auto;
+  container-type: inline-size;
+  border-inline-start: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  background-image: linear-gradient(
+    var(--brand-color-border-muted),
+    var(--brand-color-border-muted)
+  );
+  background-size: var(--brand-borderWidth-thin) 100%;
+  background-position: 100% 0;
+  background-repeat: no-repeat;
+}
+
+@media screen and (max-width: 119.99rem) {
+  .wideFrame {
+    margin-inline: var(--page-gutter);
+  }
+}
+
+.wideGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
+}
+
+.wideGrid .item {
+  border-block-start: 0;
+  border-inline-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  border-block-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+}
+
+/* Except on the last page, a short last row in the three-column wide grid
+   (3 x 23rem of frame) is centered: one card sits under the middle column,
+   and two cards shift half a column, so the middle card's sides above meet
+   the middle of their top edges. The first shifted card draws its own left
+   line. Two columns never end short before the last page, because page sizes
+   are even and the side grid holds whole rows of two. */
+@container (width >= 69rem) {
+  .wideGridCentered > .col:nth-child(3n + 1):last-child {
+    position: relative;
+    inset-inline-start: 100%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2),
+  .wideGridCentered > .col:nth-child(3n + 2):last-child {
+    position: relative;
+    inset-inline-start: 50%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):last-child .item,
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2) .item {
+    border-inline-start: var(--brand-borderWidth-thin) solid
+      var(--brand-color-border-muted);
+  }
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/learning-hub-copilot-app.module.css b/website/src/components/brand/styles/learning-hub-copilot-app.module.css
index 8a86092015..cca3c69a26 100644
--- a/website/src/components/brand/styles/learning-hub-copilot-app.module.css
+++ b/website/src/components/brand/styles/learning-hub-copilot-app.module.css
@@ -1919,6 +1919,11 @@
       var(--brand-color-border-muted);
   }
 
+  /* Split page: the wide grid below draws the line under these cards. */
+  .threeUpSplit {
+    border-block-end: 0;
+  }
+
   /* Four-up stats row */
   .fourUp .item {
     border-block-start: 0;
@@ -1931,6 +1936,70 @@
   }
 }
 
+/* Cards past the end of the filter list move to a wider grid below the
+   catalog, inside the same frame: as many columns of at least 23rem as fit
+   (three in the 1280px frame). The frame draws the top and left gridlines,
+   and the right one beside an unfilled last row; each cell draws its own
+   right and bottom lines. It sits in the catalog's Section, so it shares the
+   1280px cap and, below 120rem, the same gutter inset as .catalog. */
+.wideFrame {
+  width: auto;
+  container-type: inline-size;
+  border-inline-start: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  background-image: linear-gradient(
+    var(--brand-color-border-muted),
+    var(--brand-color-border-muted)
+  );
+  background-size: var(--brand-borderWidth-thin) 100%;
+  background-position: 100% 0;
+  background-repeat: no-repeat;
+}
+
+@media screen and (max-width: 119.99rem) {
+  .wideFrame {
+    margin-inline: var(--page-gutter);
+  }
+}
+
+.wideGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
+}
+
+.wideGrid .item {
+  border-block-start: 0;
+  border-inline-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  border-block-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+}
+
+/* Except on the last page, a short last row in the three-column wide grid
+   (3 x 23rem of frame) is centered: one card sits under the middle column,
+   and two cards shift half a column, so the middle card's sides above meet
+   the middle of their top edges. The first shifted card draws its own left
+   line. Two columns never end short before the last page, because page sizes
+   are even and the side grid holds whole rows of two. */
+@container (width >= 69rem) {
+  .wideGridCentered > .col:nth-child(3n + 1):last-child {
+    position: relative;
+    inset-inline-start: 100%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2),
+  .wideGridCentered > .col:nth-child(3n + 2):last-child {
+    position: relative;
+    inset-inline-start: 50%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):last-child .item,
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2) .item {
+    border-inline-start: var(--brand-borderWidth-thin) solid
+      var(--brand-color-border-muted);
+  }
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/plugins.module.css b/website/src/components/brand/styles/plugins.module.css
index a1a6542491..dca7ce5167 100644
--- a/website/src/components/brand/styles/plugins.module.css
+++ b/website/src/components/brand/styles/plugins.module.css
@@ -1116,6 +1116,11 @@
       var(--brand-color-border-muted);
   }
 
+  /* Split page: the wide grid below draws the line under these cards. */
+  .threeUpSplit {
+    border-block-end: 0;
+  }
+
   /* Four-up stats row */
   .fourUp .item {
     border-block-start: 0;
@@ -1128,6 +1133,70 @@
   }
 }
 
+/* Cards past the end of the filter list move to a wider grid below the
+   catalog, inside the same frame: as many columns of at least 23rem as fit
+   (three in the 1280px frame). The frame draws the top and left gridlines,
+   and the right one beside an unfilled last row; each cell draws its own
+   right and bottom lines. It sits in the catalog's Section, so it shares the
+   1280px cap and, below 120rem, the same gutter inset as .catalog. */
+.wideFrame {
+  width: auto;
+  container-type: inline-size;
+  border-inline-start: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  background-image: linear-gradient(
+    var(--brand-color-border-muted),
+    var(--brand-color-border-muted)
+  );
+  background-size: var(--brand-borderWidth-thin) 100%;
+  background-position: 100% 0;
+  background-repeat: no-repeat;
+}
+
+@media screen and (max-width: 119.99rem) {
+  .wideFrame {
+    margin-inline: var(--page-gutter);
+  }
+}
+
+.wideGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
+}
+
+.wideGrid .item {
+  border-block-start: 0;
+  border-inline-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  border-block-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+}
+
+/* Except on the last page, a short last row in the three-column wide grid
+   (3 x 23rem of frame) is centered: one card sits under the middle column,
+   and two cards shift half a column, so the middle card's sides above meet
+   the middle of their top edges. The first shifted card draws its own left
+   line. Two columns never end short before the last page, because page sizes
+   are even and the side grid holds whole rows of two. */
+@container (width >= 69rem) {
+  .wideGridCentered > .col:nth-child(3n + 1):last-child {
+    position: relative;
+    inset-inline-start: 100%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2),
+  .wideGridCentered > .col:nth-child(3n + 2):last-child {
+    position: relative;
+    inset-inline-start: 50%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):last-child .item,
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2) .item {
+    border-inline-start: var(--brand-borderWidth-thin) solid
+      var(--brand-color-border-muted);
+  }
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/skills.module.css b/website/src/components/brand/styles/skills.module.css
index 62754643f8..54092099e4 100644
--- a/website/src/components/brand/styles/skills.module.css
+++ b/website/src/components/brand/styles/skills.module.css
@@ -1104,6 +1104,11 @@
       var(--brand-color-border-muted);
   }
 
+  /* Split page: the wide grid below draws the line under these cards. */
+  .threeUpSplit {
+    border-block-end: 0;
+  }
+
   /* Four-up stats row */
   .fourUp .item {
     border-block-start: 0;
@@ -1116,6 +1121,70 @@
   }
 }
 
+/* Cards past the end of the filter list move to a wider grid below the
+   catalog, inside the same frame: as many columns of at least 23rem as fit
+   (three in the 1280px frame). The frame draws the top and left gridlines,
+   and the right one beside an unfilled last row; each cell draws its own
+   right and bottom lines. It sits in the catalog's Section, so it shares the
+   1280px cap and, below 120rem, the same gutter inset as .catalog. */
+.wideFrame {
+  width: auto;
+  container-type: inline-size;
+  border-inline-start: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  background-image: linear-gradient(
+    var(--brand-color-border-muted),
+    var(--brand-color-border-muted)
+  );
+  background-size: var(--brand-borderWidth-thin) 100%;
+  background-position: 100% 0;
+  background-repeat: no-repeat;
+}
+
+@media screen and (max-width: 119.99rem) {
+  .wideFrame {
+    margin-inline: var(--page-gutter);
+  }
+}
+
+.wideGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
+}
+
+.wideGrid .item {
+  border-block-start: 0;
+  border-inline-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  border-block-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+}
+
+/* Except on the last page, a short last row in the three-column wide grid
+   (3 x 23rem of frame) is centered: one card sits under the middle column,
+   and two cards shift half a column, so the middle card's sides above meet
+   the middle of their top edges. The first shifted card draws its own left
+   line. Two columns never end short before the last page, because page sizes
+   are even and the side grid holds whole rows of two. */
+@container (width >= 69rem) {
+  .wideGridCentered > .col:nth-child(3n + 1):last-child {
+    position: relative;
+    inset-inline-start: 100%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2),
+  .wideGridCentered > .col:nth-child(3n + 2):last-child {
+    position: relative;
+    inset-inline-start: 50%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):last-child .item,
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2) .item {
+    border-inline-start: var(--brand-borderWidth-thin) solid
+      var(--brand-color-border-muted);
+  }
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/useCatalogSplit.ts b/website/src/components/brand/useCatalogSplit.ts
new file mode 100644
index 0000000000..70539703df
--- /dev/null
+++ b/website/src/components/brand/useCatalogSplit.ts
@@ -0,0 +1,202 @@
+import {
+  useEffect,
+  useEffectEvent,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+
+import {
+  DEFAULT_CATALOG_RESOURCE_SIZE,
+  type CatalogResourceSize,
+} from "./CatalogResourceSizeControl";
+
+/** Everything a split decision depends on, apart from the page's scrollbar. */
+type SplitInputs = {
+  viewport: string;
+  navEnd: number;
+  length: number;
+  first: unknown;
+  last: unknown;
+};
+
+/**
+ * Splits a catalog page's cards between the grid beside the filter sidebar and
+ * a wider grid below it. A row stays beside the sidebar while it starts above
+ * the end of the filter list, so the wide grid begins with the first row the
+ * sidebar no longer reaches. The default page size never splits, and when the
+ * sidebar stacks above the cards (narrow screens), every card stays in the
+ * side grid.
+ */
+export function useCatalogSplit<T>(
+  items: readonly T[],
+  pageSize: CatalogResourceSize,
+) {
+  const filterNavRef = useRef<HTMLElement>(null);
+  const sideGridRef = useRef<HTMLDivElement>(null);
+  const wideGridRef = useRef<HTMLDivElement>(null);
+  // A card that changes grids remounts, so its focused control is lost.
+  const pendingFocus = useRef<FocusSpot | null>(null);
+  const splits = pageSize !== DEFAULT_CATALOG_RESOURCE_SIZE;
+  // Infinity until a measurement cuts the list, so a stacked layout or a
+  // longer list never mounts a wide grid only to tear it down again.
+  const [besideCount, setBesideCount] = useState(Infinity);
+  const shown = splits ? Math.min(besideCount, items.length) : items.length;
+  const lastChange = useRef<{
+    inputs: SplitInputs;
+    from: number;
+    to: number;
+  } | null>(null);
+
+  const measure = useEffectEvent(() => {
+    const nav = filterNavRef.current;
+    const grid = sideGridRef.current;
+    if (!splits || !nav || !grid || items.length === 0) return;
+    const navEnd = filterListEnd(nav);
+    const next = countBeside(nav, grid, navEnd, shown, items.length);
+    if (next === besideCount) return;
+    // Keep a larger stored count when it already shows the right cards, but
+    // store the first finite count, so a longer list later grows row by row.
+    if (next === shown && besideCount !== Infinity) return;
+    // Moving cards changes the page height, which can add or remove the
+    // vertical scrollbar and so the grid's width. If a change would only undo
+    // the previous one while nothing else moved, keep the current split.
+    const inputs: SplitInputs = {
+      viewport: `${window.innerWidth}x${window.innerHeight}`,
+      navEnd: Math.round(navEnd - nav.getBoundingClientRect().top),
+      length: items.length,
+      first: items[0],
+      last: items[items.length - 1],
+    };
+    const previous = lastChange.current;
+    if (
+      previous &&
+      previous.from === next &&
+      previous.to === besideCount &&
+      sameInputs(previous.inputs, inputs)
+    ) {
+      return;
+    }
+    lastChange.current = { inputs, from: besideCount, to: next };
+    pendingFocus.current = focusSpot([grid, wideGridRef.current]);
+    setBesideCount(next);
+  });
+
+  // Put focus back on the same card and control after a move, unless the
+  // reader has already focused something else.
+  useLayoutEffect(() => {
+    const spot = pendingFocus.current;
+    pendingFocus.current = null;
+    if (!spot || document.activeElement !== document.body) return;
+    restoreFocus([sideGridRef.current, wideGridRef.current], spot);
+  });
+
+  // Page, sort, filter, page size, and "Show more" changes all re-render, so
+  // measure after every render, before the browser paints.
+  useLayoutEffect(() => measure());
+
+  // Viewport changes resize the side grid, and font loads can reflow the
+  // filter groups without a render, so watch both.
+  useEffect(() => {
+    const grid = sideGridRef.current;
+    const nav = filterNavRef.current;
+    if (!grid || !nav) return;
+    const observer = new ResizeObserver(() => measure());
+    observer.observe(grid);
+    for (const group of nav.lastElementChild?.children ?? []) {
+      observer.observe(group);
+    }
+    return () => observer.disconnect();
+  }, []);
+
+  return {
+    filterNavRef,
+    sideGridRef,
+    wideGridRef,
+    beside: items.slice(0, shown),
+    below: items.slice(shown),
+  };
+}
+
+/**
+ * The sidebar box stretches to the catalog's height, so the filter list ends
+ * at its last group (or Clear all) plus the sidebar's bottom padding.
+ */
+function filterListEnd(nav: HTMLElement) {
+  const list = nav.lastElementChild?.lastElementChild ?? nav;
+  return (
+    list.getBoundingClientRect().bottom +
+    parseFloat(getComputedStyle(nav).paddingBlockEnd)
+  );
+}
+
+function countBeside(
+  nav: HTMLElement,
+  grid: HTMLElement,
+  navEnd: number,
+  shown: number,
+  total: number,
+) {
+  // Stacked layout: the sidebar sits above the cards, not beside them.
+  const gridLeft = grid.getBoundingClientRect().left;
+  if (nav.getBoundingClientRect().right > gridLeft + 1) return Infinity;
+  const cells = Array.from(grid.children, (cell) =>
+    cell.getBoundingClientRect(),
+  );
+  if (cells.length === 0) return Math.min(total, 1);
+  const columns = Math.max(
+    1,
+    Math.round(grid.getBoundingClientRect().width / cells[0].width),
+  );
+  const rows = Math.ceil(cells.length / columns);
+  const rowsBeside = new Set(
+    cells.filter((cell) => cell.top < navEnd).map((cell) => cell.top),
+  ).size;
+  // Cut whole rows that start at or below the end of the filter list.
+  if (rowsBeside < rows) return rowsBeside * columns;
+  if (shown >= total) return shown;
+  // Every row shown so far starts beside the filters. Fill a short last row,
+  // or add one more row while the grid still ends above the filters' end
+  // (rows touch, so the next row would start where this one ends).
+  if (cells.length % columns !== 0) return Math.min(total, rows * columns);
+  if (cells[cells.length - 1].bottom < navEnd) {
+    return Math.min(total, shown + columns);
+  }
+  return shown;
+}
+
+const FOCUSABLE = "a[href], button, [tabindex]";
+
+/** Which card (counting across both grids) and which of its controls. */
+type FocusSpot = { card: number; control: number };
+
+function focusSpot(grids: (Element | null)[]): FocusSpot | null {
+  const active = document.activeElement;
+  let card = 0;
+  for (const grid of grids) {
+    for (const cell of grid?.children ?? []) {
+      if (active && cell.contains(active)) {
+        const controls = Array.from(cell.querySelectorAll(FOCUSABLE));
+        return { card, control: controls.indexOf(active) };
+      }
+      card += 1;
+    }
+  }
+  return null;
+}
+
+function restoreFocus(grids: (Element | null)[], spot: FocusSpot) {
+  const cells = grids.flatMap((grid) => Array.from(grid?.children ?? []));
+  const controls = cells[spot.card]?.querySelectorAll<HTMLElement>(FOCUSABLE);
+  controls?.[spot.control]?.focus();
+}
+
+function sameInputs(a: SplitInputs, b: SplitInputs) {
+  return (
+    a.viewport === b.viewport &&
+    a.navEnd === b.navEnd &&
+    a.length === b.length &&
+    a.first === b.first &&
+    a.last === b.last
+  );
+}