From fa8cfc58fee7379d72388d883fbc63a240c92438 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 6 Mar 2026 15:38:39 +0000
Subject: [PATCH] Display four article cards per row on category pages

Update the grid layout in CategoryPage to display four article cards per row on extra large screens (xl:grid-cols-4).

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c8b3ce2d-7340-495e-915d-af6ee9cb8394
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/ee1CXlO
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/category.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/category.tsx b/client/src/pages/category.tsx
index 2efe39d..ace1815 100644
--- a/client/src/pages/category.tsx
+++ b/client/src/pages/category.tsx
@@ -135,7 +135,7 @@ export default function CategoryPage() {
         </div>
 
         {isLoading ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
             {Array.from({ length: 6 }).map((_, i) => (
               <div key={i} className="bg-card rounded-md border border-card-border">
                 <Skeleton className="w-full aspect-video rounded-t-md" />
@@ -149,7 +149,7 @@ export default function CategoryPage() {
           </div>
         ) : data && data.articles.length > 0 ? (
           <>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
               {data.articles.flatMap((article, index) => {
                 const items = [
                   <Link key={article.id} href={`/article/${article.slug}`}>