From 6ac4cf4b76fd5224ef5377d70eb73ecb8d57f0d2 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Wed, 29 Jul 2026 14:13:25 +0200
Subject: [PATCH] Align card and column breakpoints (#4449)

---
 .../gitbook/src/components/DocumentView/Columns/Columns.tsx   | 4 ++--
 .../gitbook/src/components/DocumentView/Table/ViewCards.tsx   | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/gitbook/src/components/DocumentView/Columns/Columns.tsx b/packages/gitbook/src/components/DocumentView/Columns/Columns.tsx
index 97f64a2ab..a3c5aff4d 100644
--- a/packages/gitbook/src/components/DocumentView/Columns/Columns.tsx
+++ b/packages/gitbook/src/components/DocumentView/Columns/Columns.tsx
@@ -36,7 +36,7 @@ export function Columns(props: BlockProps<DocumentBlockColumns>) {
     return (
         <div
             className={tcls(
-                'grid w-full grid-cols-1 gap-x-8 gap-y-4 md:grid-flow-col md:grid-cols-[repeat(var(--grid-slices),minmax(0,1fr))] md:grid-rows-1',
+                'grid w-full @2xl:grid-flow-col @2xl:grid-cols-[repeat(var(--grid-slices),minmax(0,1fr))] grid-cols-1 @2xl:grid-rows-1 gap-x-8 gap-y-4',
                 style
             )}
             style={{ '--grid-slices': COLUMN_DIVISIONS } as React.CSSProperties}
@@ -102,7 +102,7 @@ export function transformLengthToCSS(length: Length) {
     }
     if (length.unit === '%') {
         return {
-            className: 'md:flex-shrink-0 md:[grid-column:var(--grid-col)]',
+            className: '@2xl:flex-shrink-0 @2xl:[grid-column:var(--grid-col)]',
             style: {
                 '--grid-col': `auto / span ${Math.round(length.value * 0.01 * COLUMN_DIVISIONS)}`,
             } as React.CSSProperties,
diff --git a/packages/gitbook/src/components/DocumentView/Table/ViewCards.tsx b/packages/gitbook/src/components/DocumentView/Table/ViewCards.tsx
index 5c8dd4c68..574fb60ef 100644
--- a/packages/gitbook/src/components/DocumentView/Table/ViewCards.tsx
+++ b/packages/gitbook/src/components/DocumentView/Table/ViewCards.tsx
@@ -31,8 +31,7 @@ function CardsGrid(props: TableViewProps<DocumentTableViewCards>) {
                 'inline-grid',
                 'gap-4',
                 'grid-cols-1',
-                '@sm:grid-cols-2',
-                view.cardSize === 'large' ? '@xl:grid-cols-2' : '@xl:grid-cols-3',
+                view.cardSize === 'large' ? '@xl:grid-cols-2' : '@2xl:grid-cols-3 @sm:grid-cols-2', // Large cards break earlier to avoid becoming *too* big.
                 block.data.fullWidth ? 'large:flex-column' : null
             )}
         >