From 2fb2b0a5383b51fcb7e5a3392b40e2c960ebf297 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 19 Jan 2023 12:48:58 -0500
Subject: [PATCH] UX: switch categories-boxes layouts from flexbox to grid
 (#19501)

---
 app/assets/stylesheets/common/base/category-list.scss | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index d6c4154eb6a..80eedde0147 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -43,9 +43,8 @@
 
 .category-boxes,
 .category-boxes-with-topics {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
+  display: grid;
+  gap: 1.5em;
   margin-top: 1em;
   margin-bottom: 1em;
   width: 100%;
@@ -117,9 +116,8 @@
 }
 
 .category-boxes {
+  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
   .category-box {
-    width: 23%;
-    margin: 0 1% 1.5em 1%;
     > a {
       width: 100%;
       padding: 0;
@@ -253,9 +251,8 @@
 }
 
 .category-boxes-with-topics {
+  grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
   .category-box {
-    width: 31%;
-    margin: 0 1% 1.5em 1%;
     padding: 0;
   }