From c42a14ebfc9e595d64a5ebfe1d939d03fcf1b35c Mon Sep 17 00:00:00 2001
From: Alan Daniel <stylesshjs@gmail.com>
Date: Thu, 12 Mar 2026 14:00:31 -0400
Subject: [PATCH] support multiple columns on featured grid in go pages
 (#43717)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES/NO

## What kind of change does this PR introduce?

Bug fix, feature, docs update, ...

## What is the current behavior?

Please link any relevant issues here.

## What is the new behavior?

Feel free to include screenshots if it includes visual changes.

## Additional context

Add any other context or screenshots.
---
 .../www/_go/pre-release/byoc-early-access.tsx |  1 +
 packages/marketing/src/go/schemas.ts          |  4 ++++
 .../src/go/sections/FeatureGridSection.tsx    | 19 ++++++++++++-------
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/apps/www/_go/pre-release/byoc-early-access.tsx b/apps/www/_go/pre-release/byoc-early-access.tsx
index bc50147740c..708da73c215 100644
--- a/apps/www/_go/pre-release/byoc-early-access.tsx
+++ b/apps/www/_go/pre-release/byoc-early-access.tsx
@@ -27,6 +27,7 @@ const page: GoPageInput = {
       type: 'feature-grid',
       title: 'Your cloud, operated by Supabase',
       description: 'Get the full power of Supabase deployed inside your own infrastructure.',
+      columns: 2,
       items: [
         {
           title: 'Control where your data goes',
diff --git a/packages/marketing/src/go/schemas.ts b/packages/marketing/src/go/schemas.ts
index 8009df88e5a..7125d939aba 100644
--- a/packages/marketing/src/go/schemas.ts
+++ b/packages/marketing/src/go/schemas.ts
@@ -207,6 +207,10 @@ export const featureGridSectionSchema = z.object({
   type: z.literal('feature-grid'),
   title: z.string().optional(),
   description: z.string().optional(),
+  columns: z
+    .union([z.literal(1), z.literal(2), z.literal(3)])
+    .optional()
+    .default(3),
   items: z.array(featureGridItemSchema).min(1).max(6),
 })
 
diff --git a/packages/marketing/src/go/sections/FeatureGridSection.tsx b/packages/marketing/src/go/sections/FeatureGridSection.tsx
index 16900432698..6772107c085 100644
--- a/packages/marketing/src/go/sections/FeatureGridSection.tsx
+++ b/packages/marketing/src/go/sections/FeatureGridSection.tsx
@@ -3,8 +3,8 @@ import { cn } from 'ui'
 import type { GoFeatureGridSection } from '../schemas'
 
 export default function FeatureGridSection({ section }: { section: GoFeatureGridSection }) {
-  const { items } = section
-  const hasSecondRow = items.length > 3
+  const { items, columns = 3 } = section
+  const hasSecondRow = items.length > columns
 
   return (
     <div className="max-w-[80rem] mx-auto px-8">
@@ -19,12 +19,17 @@ export default function FeatureGridSection({ section }: { section: GoFeatureGrid
         </div>
       )}
       <div className="border border-muted rounded-xl overflow-hidden">
-        <div className="grid grid-cols-1 md:grid-cols-3">
+        <div
+          className={cn(
+            'grid grid-cols-1',
+            columns === 1 ? 'md:grid-cols-1' : columns === 2 ? 'md:grid-cols-2' : 'md:grid-cols-3'
+          )}
+        >
           {items.map((item, i) => {
-            const col = i % 3
-            const row = Math.floor(i / 3)
-            const isLastCol = col === 2 || i === items.length - 1
-            const isLastRow = !hasSecondRow || row === 1
+            const col = i % columns
+            const row = Math.floor(i / columns)
+            const isLastCol = col === columns - 1 || i === items.length - 1
+            const isLastRow = !hasSecondRow || row === Math.floor((items.length - 1) / columns)
 
             return (
               <div